@charset "UTF-8";

/* ===================================================================

	Setting

=================================================================== */
html { color:#454552; background:#FFF; line-height:1.6; text-align:left; font-size:65.5%; }
body { font-size:1.6rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow-x:hidden; }
img { max-width:100%; height:auto; }
.m { display: none; }
.pc{ display: block;}
/*.wrapper{ display: -webkit-flex; display: flex;}*/
	/* Link set
	------------------------------------------------------------------- */
	a { color: #000; text-decoration:none; transition:0.3s ease-in-out; }
	a img { transition:0.3s ease-in-out; }
	a:hover { color:#666; }
	a:hover { opacity: 0.6;}
	/* Block set
	------------------------------------------------------------------- */
	main { margin:0 auto; }
	main section { margin:0 auto; position:relative; }
	main:after,
	main section:after { content:""; display:block; clear:both; }
	
	/* JS set
	------------------------------------------------------------------- */
	.fadein { opacity:0.1; transform:translate(0, 50px); transition:all 500ms; } 
	.fadein.scrollin { opacity:1; transform:translate(0, 0); }
	ul li.fadein:nth-of-type(2) { transition-delay:200ms; }
	ul li.fadein:nth-of-type(3) { transition-delay:400ms; }
	ul li.fadein:nth-of-type(4) { transition-delay:600ms; }
	ul li.fadein:nth-of-type(5) { transition-delay:800ms; }
	ul li.fadein:nth-of-type(6) { transition-delay:1000ms; }
	
	/*お問い合わせBAR set
	------------------------------------------------------------------------*/
	/*.fixed { position: fixed; bottom: 0; width: 100%; z-index: 1000;}*/
	
	
	/*clearfix set
	-------------------------------------------------------------------------*/
	.clearfix::after { content : " "; display : block; clear : both;}
	
		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		.m { display:none; }
		@media screen and (max-width:768px) {
			
			body { font-size:1.3rem; }
			.containar { width:100%; }
			.m { display:block; }
			.pc{ display: none;}
		}
		


/* ===================================================================

	Header

=================================================================== */
header h1{ margin: 10px;}

header .headflex{
    display: flex;
    justify-content: space-between;
    height: 60px;
    margin: 20px;
}

header div{
    display: flex;
    align-items: center;
}
header .headflex .headbox1 img{
    width: auto;
    height: 40px;
    margin-bottom: 0;
}
header .headflex .headbox2 img{
    width: auto;
    height: 60px;
    margin-left: 10px;
}
header .headflex .headbox2 p{
    font-weight: bold;
    font-size: 23px;
}
.borderbottom{
    background: linear-gradient(transparent 60%, yellow 30%);
    display: inline-block;
} 




		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
            header .headflex{
                display: block;
                height: 80px;
                margin: 1rem;
            }

            header div{
                display: flex;
            }
            header .headflex .headbox1 img{
                width: 50%;
                height: auto;
                max-height: 40px;
                margin-bottom: 0.5rem;
            }
            header .headflex .headbox2 img{
                width: 10%;
                height: auto;
                max-height: 80px;
                margin-left: 0px;
            }
            header .headflex .headbox2 p{
                width: 90%;
                font-size: 13px;
            }
            .borderbottom{
                background: linear-gradient(transparent 60%, yellow 30%);
                display: inline-block;
            } 

			
		}
	
		


/* ===================================================================

	fv

=================================================================== */
.fv { background-image: url(../img/use_backimage02.png);
	  background-repeat: no-repeat;
	  background-position: bottom;    
	  background-color: #fff;
	  text-align: center;
	  height: 900px;}
.fv h1 { padding-top: 190px; text-align: center;}
.fv h2 { position: relative; width: 752px; background: #FF5F00; padding: 10px 0; color: #fff; font-size: 1.8em; font-weight: 800; margin: 20px auto; text-align: center;}

.fv h2:after {
  position: absolute;
  bottom: -9px;
  right: 50%;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #FF5F00 transparent transparent transparent;
}
.fv .flexbox{ width: 818px; display: flex; flex-direction: row; flex-wrap: wrap; background: #fff; margin: 300px auto 0;}
.fv .flexbox img{ margin:0 20px; padding-bottom:30px;}
.fv p{ width: 818px; text-align: center; font-size: 1.3em; font-weight: 600; padding: 20px 0;}



		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
		.fv { background-image: url(../img/use_backimage_sp.png);
			  background-repeat: no-repeat;
			  background-position: 50% 0px;    
			  background-color: #fff;
			  text-align: center;
			  height: 380px;
			  background-size: contain;}
		.fv h1 { padding-top: 78px; width: 80%; margin: 0 auto;}
		.fv h2 { width: 100%; background: #FF5F00; padding: 1em; color: #fff; font-size: 1.4em; font-weight: 600; margin: 25px auto;}
		.fv .flexbox{ width: 100%; display: block; margin: 200px auto 0; padding: 1em 2em;}
		.fv .flexbox img{ margin:0; padding-bottom:30px;}
		.fv p{ width: 100%; text-align: center; font-size: 1.3em; font-weight: 600; padding: 20px 0;}
				}
		


/* ===================================================================

	s1

=================================================================== */
.s1 { padding-top:5px; text-align:center;}
.s1 h2{ width:930px; text-align: center; margin: 70px auto; font-size: 1.5em; font-weight: 600; line-height: 2.0em;}
.s1 h3{ width:1080px; text-align: center; margin: 0px auto 10px;}
.s1 h3 img{ max-width: 1000px;}
.s1 .flexbox{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto; padding-top: 50px;}
.s1 .Category{ width: 1080px; padding: 10px 0 40px;}
.s1 .Category img{ padding-bottom: 15px; width: 260px;}
.s1 hr{color:#fbb03b; width:1080px; text-align: center; margin: 0 auto;}


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s1 { padding:0 2em; text-align:center;}
			.s1 h2{ width:100%; text-align: left; margin: 0; font-size: 1.2em; font-weight: 500; line-height: 1.5em;     padding-bottom: 20px;}
            .s1 h3{ width:100%; text-align: center; margin: 0px auto 10px;}
            .s1 h3 img{ width: 100%;}
			.s1 .flexbox{ width: 100%; display: block; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto;}
            .s1 .Category{ padding: 10px 0 20px;}
            .s1 hr{width:90%; text-align: center; margin: 0 auto;}
			
		}
			


/* ===================================================================

	s2

=================================================================== */
.s2 { text-align: center; background: url(../img/use2026ohback.png) center 190px no-repeat; }
.s2 .flexbox{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto; padding-top: 100px;}
.s2 .flexbox .flexparts{ width: 400px; padding: 110px 0 0 15px;}
.s2 .flexbox h1{padding-bottom: 40px;}
.s2 .flexbox h3{ font-size: 1.2em; color: #fff; letter-spacing: 0.1em;}
.s2 .flexbox p{ font-size: 1.2em; text-align:justify; line-height: 2.0em;}
.s2 .flexbox p.omotenasi{ font-size: 1em; color: #fff; letter-spacing: 0.5em; padding-top: 1px; text-align:center; padding-left: 50px;}
.s2 h3{ font-size: 3.8em; font-weight: 800; color: #f15a24; text-align: center;}
.s2 h2{ font-size: 2.0em; font-weight: 800; text-align: center;}
.s2 p{ font-size: 1.2em; text-align: center;}
.s2 .s2inner{ text-align: left; font-size: 1.0em; font-weight: 600; letter-spacing: 0.15em; margin: 0 auto; line-height: 3.5em; width: 600px; padding: 35px 0;}
.s2 .s2inner p{ background: url(../img/ap_r16_c21.png) no-repeat center left; padding-left: 50px; text-align: left;}
.s2 .imgbar{ padding-bottom: 70px;}
.s2 .Tuyomi{ padding: 0; margin:0 auto 100px; }
.s2 .Category{ width: 1080px; padding: 45px 0; margin: 0 auto;}
.s2 .Category img{ padding-bottom: 15px;}

.s2 .ossme img{ max-width: 1000px;}
.s2 .omakase{ font-size: 1.4em; text-align: center; padding: 0;}

.s2 h4{ width:1080px; text-align: center; margin: 20px auto;}
.s2 h4 img{ width: 100%;}
.s2 .flexbox02{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; margin:0 auto; padding-top: 50px;}
.s2 .Category02{ width: 1080px; padding: 10px 0 40px;}
.s2 .Category02 img{ padding-bottom: 15px; width: 260px;}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s2 { text-align: center; background: url(../img/use2026ohback.png)  center 260px no-repeat; }
			.s2 .flexbox{ width: 100%; display: block; margin: 0; padding: 1em 2em;}
			.s2 .flexbox .flexparts{ width: 100%; padding-top: 0px;}
			.s2 .flexbox h1{padding-bottom: 3.6rem; }
			.s2 .flexbox h3{ font-size: 1.1em; color: #fff; letter-spacing: 0.1em;}
            .s2 .flexbox .pc01{margin-bottom: -0.2rem;}
			.s2 .flexbox p{ font-size: 1.2em; letter-spacing: 0.1em; text-align:justify; line-height: 2.0em;}
			.s2 .flexbox p.omotenasi{ font-size: 0.9em; color: #fff; letter-spacing: 0.5em; padding-top: 0px; text-align:center; padding-left: 0; margin: 1rem 0 -0.8rem;}
			.s2 h2{ font-size: 1.5em; font-weight: 800; padding: 30px 0;}
            .s2 p{ text-align: center; padding: 0; }
			.s2 .s2inner{ text-align: left; font-size: 1.0em; font-weight: 600; letter-spacing: 0.15em; margin: 0; line-height: 2.0em; width: 100%; padding: 0 20px 20px 20px;}
			.s2 .s2inner p{ background: url(../img/ap_r16_c21.png) no-repeat center left; padding-left: 30px; background-size:7%;}
			.s2 .imgbar{ padding-bottom: 35px;}
			.s2 .Category{ width: 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 10px 0;}
			.s2 .Category img{ padding-bottom: 15px; width:50%}
            
            .s2 .ossme img{ width: 100%;}
            .s2 .omakase{ padding: 0 10px;;}
            
            .s2 h4{ width:100%; text-align: center; margin: 0px auto;}
            .s2 h4 img{ width: 100%;}
			.s2 .flexbox02{ width: 100%; display: block; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto;}
						
		}



/* ===================================================================

	s3

=================================================================== */
.s3 .flexbox{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto; padding: 40px 0 40px;}
.s3 .right{ flex-direction: row-reverse;}
.s3 .s3txt{ text-align: left; letter-spacing: 0.15em; color:#454552;}
.s3 .s3txt02{ text-align: left; letter-spacing: 0.15em; color:#454552;}
.s3 h2{ font-size: 1.8em; font-weight: 700; padding: 5px 0 20px 0;}
.s3 .s3txt h2{color:#E85A70;}
.s3 .s3txt02 h2{color:#4EA1D5;}
.s3 p{ font-size: 1.3em; line-height: 1.7em; text-align: justify; margin: 0;}
.s3 .s3imgdai{width: 100%; margin: 20px auto;}
.s3 .s3inner01{ background-color:#EAEAEA}
.s3 .s3inner02{ background-color:#fff}

.s3 h4{ width:1000px; text-align: center; margin: 20px auto;}
.s3 h4 img{ width: 100%;}

.s3 .kadomaru img{
	border-radius: 15px;
}

.s3flex {
  display: flex;
}
.s3flex p {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.s3flex p img{
  width:80%;
	margin-left: 8%;
}
.yajirusi img{
	width:100%;
	margin-bottom: 1.8rem;
	max-width: 300px;
}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s3 .flexbox{ width: 100%; display: block; flex-direction: row; flex-wrap: wrap; margin: 0 auto; padding: 2em 2em;}
			.s3 .right{ flex-direction: row-reverse;}
			.s3 .s3txt{ width: 100%; text-align: left; letter-spacing: 0; color:#454552; margin-left: 0;  text-align: center;}
			.s3 .s3txt02{ width: 100%; text-align: left; letter-spacing: 0.15em; color:#454552; margin-right: 0; text-align: center;}
			.s3 .s3img{ width: 20%; margin:0 auto; padding: 10px 0;}
			.s3 h2{ font-size: 1.2em; font-weight: 600; padding: 5px 0 10px 0; text-align: left;}
			.s3 p{ font-size: 0.9em; line-height: 2.0em;}
			/*.s3 .s3inner01{ background: url(../img/ap_r31_c1_02.png) no-repeat right;}
			.s3 .s3inner02{ background: url(../img/ap_r32_c1_02.png) no-repeat left;}*/
			
            .s3 h4{ width:100%; text-align: center; margin: 0px auto;}
            .s3 h4 img{ width: 100%;}
			
			.s3 .kadomaru img{
                border-radius: 8px;
            }
			
            .s3flex {
              display: block;
            }
            .s3flex p {
              margin: 0;
              padding: 0;
            }
            .yajirusi img{
                width:70%;
                margin-bottom: 1.8rem;
                max-width: 300px;
            }
					
		}
		

/* ===================================================================

	s4

=================================================================== */
.s4 { text-align: center; padding-top: 50px;}
.s4 h2{ font-size: 2.0em; font-weight: 600; padding: 5px; text-align: center; color: #fff; background-color: #e85a70; background-image: linear-gradient(315deg, #e85a70 0%, #e7302f 74%); margin-bottom: 20px;}
.s4 ul{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; padding-bottom: 100px;}
.s4 ul li{ width: 135px;}
.s4 ul .nagareyjrs{ width: 20px; padding-top: 10px;}
.s4 ul .nagareyjrs img{ vertical-align:middle; } 
.s4 ul li .nagarettl{ font-size: 1.1em; font-weight: bold; text-align: center; color: #4EA1D5}
.s4 ul li p{ font-size: 0.92em; padding-top:10px; text-align:justify; line-height: 1.44em;}
.s4 ul li .nagare{width:100%; text-align: center; }
.s4 ul li .nagare img{ height:50px; } 
	


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s4 { text-align: center; padding-top: 30px;}
			.s4 h2{ font-size: 1.8em; font-weight: 800; margin-bottom: 0;} 
			.s4 ul{ width: 100%; display: block; margin: 0 auto; padding-bottom: 30px;}
			.s4 ul li{ width: 100%; padding:1em 2em;}
            .s4 ul .nagareyjrsm{ }
            .s4 ul .nagareyjrsm img{ max-width:50px; } 
            .s4 ul li .nagarettl{ font-size: 1.5em; font-weight: bold;}
			.s4 ul li p{ font-size: 1.2em; padding-top:10px; text-align:center; line-height: 1.7em;}
            .s4 ul li .nagare{width:100%; text-align: center; }
            .s4 ul li .nagare img{ max-width:100px; height:auto; } 
			
		}




/* ===================================================================

	s5

=================================================================== */
.s5 { padding: 20px 0 90px 0; text-align: center;}
.s5 h2{ font-size: 2.0em; font-weight: 600; padding: 30px 0; text-align: center;}
.s5 h3{ font-size: 2.2em; font-weight: 600; padding: 30px 0; color: #fff; letter-spacing: 0.05em; text-align: center;}
.s5 h3 span{ font-size: 1.5em; font-weight: 900;}
.s5 h4{ font-size: 3.4em; font-weight: 600; color: #fff; padding: 2.4rem 0 0; }
.s5 h4 img{ max-width: 620px; margin: 40px auto 0;}

.s5 ul{ width: 1000px; margin: 0 auto;}
.s5 ul li{ padding:10px 0; border-bottom: 1px dashed #333;}
.s5 ul li p{ text-align: left; background: url(../img/ap_r5_c3.jpg) no-repeat; padding-left: 50px; font-size:1.0em; letter-spacing: 0.1em; color: #333; height: 61px;}
.s5 ul li p.www{ padding-top: 20px;}
.s5 ul li p.answer{ background: url(../img/ap_r6_c3.jpg) no-repeat;}
.s5 .bk{ background: url(../img/use2026s5bc.png) center center; margin-top: 50px;}
.s5 .bk p{ font-size: 1.2em; font-weight: 400; letter-spacing: 0.1em; line-height: 2.0em; color: #fff; padding-top: 150px; padding-bottom: 40px; text-align: center;}
.s5 small{ font-size: 0.8em; padding: 10px 0}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s5 { text-align: center; padding: 20px 0 150px 0;}
			.s5 h2{ font-size: 1.5em; font-weight: 600; padding: 20px 0;}
			.s5 h3{ font-size: 1.5em; font-weight: 600; padding: 20px 0; color: #fff; letter-spacing: 0.05em;}
			.s5 h3 span{ font-size: 1.5em;}
            .s5 h4 img{ width: 90%; max-width: 620px; margin: 30px auto 0;}
			.s5 ul{ width: 100%; margin: 0 auto; padding: 0 2em;}
			.s5 ul li{ padding:10px 0; border-bottom: 1px dashed #333;}
			.s5 ul li p{ text-align: left; background: url(../img/ap_r5_c3.jpg) no-repeat; padding-left: 50px; font-size:0.8em; letter-spacing:0; color: #333; height: 101px;}
			.s5 ul li p.www{ padding-top: 15px;}
			.s5 ul li p.answer{ background: url(../img/ap_r6_c3.jpg) no-repeat;}
			.s5 .bk{ background: url(../img/use2026s5bc.png) center center; margin-top: 30px;}
			.s5 .bk p{ font-size: 0.9em; font-weight: 400; letter-spacing: 0.1em; line-height: 1.8em; color: #fff; padding-top: 100px; padding-bottom: 10px; margin: 0 2em;}
			.s5 small{ font-size: 0.8em; padding: 10px 0}

			
		}

		


/* ===================================================================

	s6

=================================================================== */
.s6{ background: #454552; text-align:center; border-top: 2px solid #4B4B4B;  position: fixed; bottom: 0; z-index:100; width:100%}
.s6 h2 { position: relative; width: 752px; background: #E85A70; padding: 10px 0; color: #fff; font-size: 1.8em; font-weight: 800; margin: 20px auto; text-align: center;}

.s6 h2:after {
  position: absolute;
  bottom: -9px;
  right: 50%;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #E85A70 transparent transparent transparent;
}
.s6 p{ color: #4B4B4B; padding: 10px 0; text-align: center; font-size: 1.6em;}
.s6 .flexbox{ padding: 12px; }

			/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			.s6{ background: #454552; text-align:center; border-top: 2px solid #4B4B4B;  position: fixed; bottom: 0; z-index:100; width:100%; padding: 0 1em 0.5em;}
			.s6 p{ color: #4B4B4B; padding: 0;}
			.s6 .flexbox{ display: block; padding-bottom: 0; }
			.s6 img{ width:90%; padding-bottom:5px;}
            
            .s6 h2 { position: relative; width: 90%; padding: 10px 0; font-size: 1.6em; font-weight: 800; margin: 14px auto;}


            
		}

/*.s6 { background:#000; text-align:center; padding:150px 0; color:#FFF; }
.s6 h1 { margin-bottom:80px; }
.s6 > p { margin-bottom:80px; }
.s6 address a { display:block; margin:0 auto 20px; }
.s6 address .mail { width:880px; height:140px; line-height:140px; text-align:center; background:#12F3F3; }
.s6 address .mail:hover { border-radius:20px; height:150px; line-height:150px; }
.s6 address p { font-size:1.3rem; }
.s6 address p:first-of-type { margin-bottom:100px; }*/


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		/*@media screen and (max-width:768px) {
			
			.s6 { background:#000; text-align:center; padding:4em 2em; color:#FFF; }
			.s6 h1 { margin-bottom:3em; text-align:center; }
			.s6 > p { margin-bottom:3em; text-align:left; }
			.s6 address a { display:block; margin:0 auto 20px; }
			.s6 address .mail { width:100%; height:60px; line-height:60px; text-align:center; background:#12F3F3; padding:0 2em; }
			.s6 address .mail:hover { border-radius:20px; height:60px; line-height:60px; }
			.s6 address p { font-size:1.1rem; text-align:left; }
			.s6 address p:first-of-type { margin-bottom:4em; }
			
		}*/




.goomtns {margin: 0px auto 60px; max-width: 1000px;}
.goomtns img {padding: 0;}
		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			.goomtns {margin: 0px auto 20px;}
			.goomtns img {padding: 0 1em;}	
		}