@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;}
.pc {display:block;}
.sp {display:none;}
.Red {color: #FF0004;}
.clear {clear:both;}
#ZOF_wrap a{color: #000; text-decoration: none; text-align: center;}
#ZOF_wrap a img:hover{opacity: 0.8;}

#ZOF_content {width:100%;  max-width: 1000px; padding: 0;	margin:0 auto ;/* background-color: #000; color: #fff;*/}
#ZOF_wrap {
	clear: both;
	width:100%;
	max-width: 1000px;
	padding: 0 0 8%;
	margin:0 auto ;
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/
	/*color: #000000;	*/
	/*background-color: #EFEFEF;*/
}

#ZOF_wrap h1{font-size: 25px; margin: 10% auto 2%; text-align: center;}
#ZOF_wrap h2{width: 100%; margin: 2% auto 4%; font-size: 35px; /*margin: 0 auto 3%;*/ text-align: left; font-weight: 700;}
#ZOF_wrap h3{width: 100%; padding: 1% 0; font-size: 15px; letter-spacing: 1px; margin: 0 auto 3%; text-align: center; color: #fff; background-color: #009be5;}

.main {width: 90%; margin:0 auto 3%; max-width: 1000px; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center; }
/*.main_txt{width: 35%; margin: 0; order: 1; font-size: 15px; line-height: 2em; text-align: center;}
.main_txt img{width: 80%; margin: 0 auto 5%; }
.ttl_logo{width: 80%; margin: 0 auto 3%; display: block;}
.main_img{width: 60%; margin: 0; order: 2;}*/

.bold{font-weight: bold; display: block; margin-bottom: 1%; letter-spacing: 1px; font-size: 110%;}
.bold2{font-size: 130%; font-weight: 700; display: block; margin-bottom: 2%; letter-spacing: 1px;}
.red{color: #CC0D10; font-weight: bold;}
.sml{font-size: 70%;}
.Lead_pc {
	width: 100%;
	margin: 5% auto 0;
	display: block;
	text-align:center;
	font-size:1.6rem;
	padding:0 ;
	line-height:2em;
	font-family: 'Noto Sans JP', sans-serif;
}
.Lead_sp {display: none;}


.txt_bl{color: #009be5;}

/*item-----------------------*/
/*.staff_wrap{width: 50%; margin: 5% auto 10%; display:flex; flex-wrap:wrap;	justify-content: space-between; }
.staff_box{width: 30%; margin: 0 auto; }
.staff1{ width: 90%; margin: 0 auto; }*/


.sns_box{
	width: 80%;
	margin: 5% auto 0;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.sns1{
	width: 45%;
	margin: 0;
	box-sizing: border-box;
}



.item_wrap{width: 80%; margin: 5% auto 10%; /*display:flex; flex-wrap:wrap; justify-content: space-between; */}
.item_box{	width: 100%;	margin: 0 auto 10%; border: 4px solid #009be5; border-radius: 80px 80px 0 0; padding: 5% 5% 6%; /*position: relative;*/ box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-end;}
.item1{	width: 40%;	margin: 5% 0 0;}
.item2{	width: 50%;	margin: 5% 0 0; justify-content: center;}
/*.item_img{	width: 80%;	margin: 0 auto; z-index: 10;}*/
/*.cmt1{ width: 5%; font-size: 16px; line-height: 1.8em; position: absolute; left: 5%; bottom: 7%;
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;}*/
.cmt1{ width: 5%; font-size: 16px; line-height: 1.8em; 
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;}
.cmt2{ width: 100%; font-size: 16px; margin: 0 auto 2%;  line-height: 1.6em;  text-align: left; /* display: inline-block; position: relative; left: 5%;*/}
.credit{width: 100%; font-size: 13px; margin: 0 auto 0;  line-height: 1.6em; text-align: center; z-index: 100;}


/*.txt_R{text-align: right; }
.mr_T7{ margin-top:-10%;}
.att1{width: 100%;   margin: 5% auto 0; text-align: right; font-size: 10px; line-height: 1.4em;}

*/

.img_box {
	position: relative;
	/*max-width: 285px;*/
	width: 100%;
	height: 435px;
	margin: 0 auto;
}

.image {
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 6s infinite;
}

.image:nth-of-type(1) {
	animation-delay: 0s;
}
.image:nth-of-type(2) {
	animation-delay: 2s;
}
.image:nth-of-type(3) {
	animation-delay: 4s;
}


@keyframes change-img-anim {
  0%{ opacity: 0;}
 20%{ opacity: 1;}
  33%{ opacity: 1;}
  63%{ opacity: 0;}
  100%{ opacity: 0;}
}
   
/* General button style (reset) */
.btn { border: none; font-family: inherit;	color: inherit;	background: none; cursor: pointer; display: inline-block; letter-spacing: 1px; outline: none;	position: relative;	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-align: center;	margin: 2% auto 8%;	text-transform: uppercase;}


/* Button 1 */
/*.btn-1 {
	width: 40%;
    color: #fff;
    text-align: center;
    margin: 0 auto 8%;
    display: block;
    padding: 8px 0px;
    font-size: 1.5rem;
	font-weight: 500;
    background-color: #000;
	border-radius: 10px;
}

.btn:hover {
	color: #000;
	background-color: #aaa;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}*/


@media only screen and (max-width: 750px) {
	#ZOF_wrap {width: 100%; padding: 0 0 15%; margin: 0;}
	.main {margin:0 auto 5%; width: 100%; display: block;}
	.main_txt{width: 100%; margin: 5% auto 0;/* order: 2;*/}
	.main_img{width: 100%; margin: 0;/* order: 1;*/}
	.sp {display:block;}
	.pc {display:none;}	
	.Lead_pc {display: none;}
	.Lead_sp {width: 88%; display: block; text-align:center; font-size:13px; margin:0 auto 10% ; line-height:1.9em; font-family: 'Noto Sans JP', sans-serif;}
	
	.bold2{font-size: 133%;  margin-bottom: 2%; letter-spacing: 1px; font-weight: 700;}
	
	#ZOF_wrap h1{font-size: 28px; margin: 20% auto 2%;}
	#ZOF_wrap h2{font-size: 25px; margin: 2% auto 4%; font-weight: 700;}
	#ZOF_wrap h3{width: 100%; padding: 2% 0; font-size: 14px; margin: 0 auto 3%;}
/*item-----------------------*/
	/*.staff_wrap{width: 98%; margin: 5% auto 15%;}
	.sns_box{width: 95%; margin: 5% auto 0;}*/
	
	


	.item_wrap{width: 96%; margin: 0 auto 5%; }
	.item_box{	width: 100%; margin: 5% auto 15%; padding: 6% 4% 4%; border-radius: 30px 30px 0 0; border: 2px solid #009be5;}
	.item1{	width: 33%;	margin: 0 ;}
	.item2{	width: 60%;	margin: 0 ;}
	.cmt1{ width: 5%; font-size: 13px; margin: 1% auto 0; line-height: 1.8em; text-align: center;}
	
	.cmt2{ width: 100%; font-size: 13px; margin: 0 auto 5%; }
	.credit{width: 100%; font-size: 14px; margin: 0 auto;  line-height: 1.8em;}
	
	.img_box {
	width: 100%;
	height: 63vw;
	margin: 0 auto 2%;
}
/* Button 1 */
	.btn-1 {width: 70%; margin: 0 auto 7%;	 padding: 7px 0px; font-size: 13px;	}
	.txt_R{text-align: right;}
}