@charset "utf-8";
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
body {font-size:14px; line-height:160%; font-family: "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; overflow-x:hidden;}
ul,ol,li,dl,dt,dd{list-style: none;}
fieldset,img { border: 0; vertical-align: middle; overflow: hidden; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { *zoom:1;}
.clear { clear: both; display: block; height: 0; overflow: hidden; }
img{ max-width:100%;}
a{ text-decoration:none; color:inherit;}
a:hover{ text-decoration:underline;}

.red_col{ color: #ff0000;}
.bu_col{ color: #3399cc;}

.f14{ font-size: 0.14rem; line-height: 140%; }
.f16{ font-size: 0.16rem; line-height: 162%; }
.f18{ font-size: 0.18rem; line-height: 140%; }
.f20{ font-size: 0.2rem; line-height: 140%; }
.f30{ font-size: 0.3rem; line-height: 140%; }
.f32{ font-size: 0.32rem; line-height: 140%; }

.pc_none{ display:none; }

.inner_ytbp{ position: relative; text-align: center; }
.inner_ytbp iframe{max-width: 100%;}

#fancybox-right {left: 0px!important;right:auto;}
#fancybox-left {right: 0px!important;left: auto;}
#fancybox-right-ico{background-position: -40px -30px!important;}
#fancybox-left-ico{background-position: -40px -60px!important;}
#fancybox-left:hover span{left: auto;right: 20px;}
#fancybox-right:hover span {right: auto;left: 20px;}


html{ font-size: 100px; }
.header{ height: 10rem; width: 1200px; max-width: 100%; margin: 0 auto;}
.ph_slide{margin:0.1rem 0; /* animation:tphloop 24s linear infinite; */ z-index: 2;}
.ph_slide .swiper-slide{ text-align: center;}
.ph_slide .tph{ display:inline-block;height: 100%;}
.ph_slide .tph img{max-height: 100%;}
@keyframes tphloop{
	0%{ transform:translate(0px,0);}
	99.9999%{ transform:translate(-49.9%,0);}
	/* 100%{ transform:translate(0%,0);} */
}
.ph_slide:hover{animation-play-state:paused;}

.swiper-button-next,.swiper-button-prev{width:auto; height:auto; padding: 5px; background: rgba(87,87,87,0.8);color: #fff;}
.swiper-button-next{right:0;}
.swiper-button-prev{left:0;}
.swiper-pagination-fraction{ bottom:0; font-size: 16px;}
.sw-author{position: absolute; bottom: 0;right: 0; padding-right: 7%; z-index: 10;}

.main{ width: 1200px; max-width: 100%; margin: 0 auto; padding-bottom:0.5rem; }

.con_mob{ padding-right:0.2rem;}
.cm_tit{  color: #925611; margin: 0.4rem 0 0.4rem 0;}
.cm_pre{ float: left; width:46.66%; }
.cm_pre .cm_ph{margin-top: -1.2rem; position: relative; z-index: 20;}

.con_mob02{ margin: 1rem; border: 1px solid #cccccc;}
.cm_inner{ padding:0 0.7rem 0.7rem 0.7rem; }
.cm_tit02{ font-size: 0.32rem; line-height: 110%; background: #fff;margin: 0.7rem 0; margin-left: -0.1em; padding: 0.3em 0;}
.cm_pre02{ float: right; width:4rem; margin: 0rem -1.7rem 0.2rem 0.6rem; }
.cm_pre03{ float: left; width:4rem; margin: 0rem 0.6rem 0.2rem -1.7rem; }

.con_mob03{ margin: 1rem;}
.cm_pre06{ float: left; width: 4rem; padding-right: 0.2rem; }
.cm_txt{ float: left; width: calc(100% - 4.2rem); }




#ninja_omatome_button_output_type_overlay{ display: none; }


/*-------------------------------------------*/
@media screen and (max-width: 750px) {

.pc_none{ display: block; }

.inner_ytbp{ position: relative; padding-bottom: 56.25%; }
.inner_ytbp iframe{ position: absolute; top: 0; left: 0; width: 100%;height: 100%; }


/* .ph_slide{ width: calc(5.14rem * 9);} */
.swiper-button-next,.swiper-button-prev{width:1.8em; height:auto; text-align: center;margin-top: -4.4em; line-height: 130%;}
.sntxt{display: inline-block;transform: rotate(90deg);}

.main{ box-sizing:border-box; padding: 0 0.2rem; }
.con_mob{  padding-right:0;}
.cm_tit{  color: #925611; margin: 0.4rem 0 0.4rem 0;}
.cm_inner {padding: 0 0.4rem 0.7rem 0.4rem;}
.con_mob02{ margin: 1rem 0; border: 1px solid #cccccc;}
.cm_pre .cm_ph{margin-top: -0.8rem;}

.cm_pre02{ width:3rem;margin: 0rem -0.8rem 0.2rem 0.3rem; }
.cm_pre03{ width:3rem; margin: 0rem 0.3rem 0.2rem -0.8rem; }

.con_mob03{ margin: 1rem 0;}
.cm_pre06{ float: none; width: auto; padding:0 0 0.2rem 0; text-align: center; }
.cm_pre06 img{ width: 4.5rem; }
.cm_txt{ float: none; width:auto;}





}

@media screen and (max-width: 480px) {
.f14{ font-size:10px;}
.f16{ font-size:12px;}
.f18{ font-size:14px;}
.f20{ font-size:18px;}
.f30{ font-size:20px;}
.f32{ font-size:22px;}




}