/* ****************************************************

	layout

***************************************************** */

.body { background-color:#001B42; color:#fff; font-family: "Noto Sans JP", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "Font Awesome 5 Brands", sans-serif; letter-spacing: 0.03em; line-height: 160%; padding: 0 auto; margin:0 auto; width: 100%; overflow:hidden; overflow-y:scroll; box-sizing: border-box; }

.body a{ color:#ECBB41; }
.body section { padding: 1% 0; margin: 0 auto; }
.body h2 { font-size: 35px; line-height: 150%; }
.body h3 { font-size: 25px; line-height: 120%; }
.body h4 { font-size: 20px; line-height: 120%; }
.body h5 { font-size: 40px; line-height: 220%; }

.body a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.body hr { height: 5px;
 background-color: #161616;
 width: 10%;
 border: none; margin: 2% auto 4% auto; }
.red { color:#EC895D; }
.yellow { color:#dbaa49; }
.small { font-size: 0.8rem; line-height: 120%; }
.big { font-size: 1.2rem; font-weight: 600; margin: 3px 0; }
.bold { font-weight: 600; }
.matchH, .matchH2{ display:block; }
.pc { display: block !important; }
.sp { display: none !important; }
a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background:#A32426;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.btn03,
a.btn03,
button.btn03 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
}

@media screen and (max-width:768px), print {
  .body body,.body div, .body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body p, .body ul, .body li, .body img, .body form, .body dl, .body dd, .body dt, .body section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.body img { width: 100%; padding: 0 1%; box-sizing: border-box; }
.body section { padding: 1% 0; box-sizing: border-box; }
.body h2 { font-size: 23px; line-height: 180%; }
.body h3 { font-size: 20px; line-height: 180%; }
.body h4 { font-size: 16px; line-height: 180%; }
.body h5 { font-size: 28px; line-height: 180%; }
.pc { display: none !important; }
.sp { display: block !important; }
}


/* ****************************************************

	section:title

***************************************************** */

#title { background-image: url( "https://d11w49g8ylcixs.cloudfront.net/resource/20210604/bg_pc.png" ) ; padding: 0 auto; margin: 0 auto; box-sizing: border-box; width: 100%; line-height:0; background-repeat: no-repeat; background-position: top 0 left 0; background-size: 100% auto;  position: relative; }

#title .inner {
  width: 95%;
  max-width: 1200px;
  padding: 0 auto;
  margin: 0 auto;
  box-sizing: border-box;
  -ms-align-items: center;
  align-items: center;
  line-height:0;

}

#title .logo {
  width: 100%;
  margin: 0; max-width: 500px; padding: 10px 0 0 20px;
  position: absolute;
  left: 0;
  top: 0;
}

#title .btn {
  width: 393px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  text-align: center;
  transform: translate(-50%,0);
}
#title .titleimg {
width: 100%; margin: 0 auto; max-width: 680px; padding: 0 auto;
}
#title img { width: 100%; }

#title .movie {
  max-width: 780px;
  margin: 5% auto 0;
}
@media screen and (max-width:768px), print {
#title { background-image: url( "https://d11w49g8ylcixs.cloudfront.net/resource/20210604/bg_sp.png" ) ; background-repeat: no-repeat; background-position: top 0 left 0; width: 100%; line-height:0; background-size: 100% auto; }
#title .titleimg {
width: 100%; margin: 40px auto 0; max-width: 680px; padding: 0 auto;
}
#title .btn {
  width: 200px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  text-align: center;
  transform: translate(-50%,0);
}
}


/* ****************************************************

	section:about

***************************************************** */

#about { padding: 0 auto; margin: 0 auto; box-sizing: border-box; color: #fff; line-height: 0;}


#about .inner {
  width: 96%;
  max-width: 800px;
  margin: 0 auto ;
  padding: 0 auto;
  text-align: center;
}

#about .ttl {
  width: 100%;
  margin: 0 auto 0 ;
  padding: 0 auto 0;
  text-align: center;
  box-sizing: border-box;
}
#about p{
  font-size:1.5rem; line-height: 200%; font-weight: 600;
}
#about .img {
  width: 100%;
  margin: 2% auto 0;
}
#about .img img{
  width: 100%;
}
#about .text {
	font-size:1.5rem; line-height: 180%; font-weight: 600; margin: 0 auto 50px;}

#about .description {
	font-size:0.9rem; line-height: 160%; text-align: left; width: 100%; max-width: 600px; margin: 20px auto; font-weight: 400;}

#about .btn {
	width:85%;
    font-weight:bold;
    display:flex;
    text-align:center;
    padding: 3% 1%;
    margin: 50px auto;
    color:#fff;
    background-color:#bb872a;
    border-radius:50px;
    font-size: 1.3rem;
    text-decoration:none;
    align-items: center;
    justify-content: center;
  }
  .sns-icon{text-align: center;}

#about .btn img{
	width:22px; padding:5px 8px 0 0;}

@media screen and (max-width:768px), print {
#about .btn{
  width: 100%;
  padding: 3% 4%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tsuika_a{display: block;}
}
#about .btn img{
	width:30px; padding:5px 8px 0 0;}

}

/* ****************************************************

	section:main

***************************************************** */

#main { width: 100%; text-align: center; margin: 0 auto; box-sizing: border-box; align-items: center;
}
#main .box {
  width: 80%;
  max-width: 1000px;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin: 5px auto;
}
#main .midasi {
	padding: 2% 1%;
	width: 200px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
	background-color: #977844;
	height: auto;
}



#main .text { padding: 2% 3%; width: 800px; text-align: left; box-sizing: border-box;
}



#main .sns { height:50px; margin: 3% auto; vertical-align: bottom;}

@media screen and (max-width:768px), print {
#main .box {
  width: 100%;
  padding: 2%;
  margin: 0 auto;
  box-sizing: border-box;
  display: block;
}
#main .midasi {
  width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
	font-size: 20px;
	background-color: #977844;
	height: auto;
}
#main .text {
  width: 100%;
  padding: 2%;
  margin: 0 auto;
  box-sizing: border-box;
}

}


/* ****************************************************

	section:sale

***************************************************** */

#sale { margin: 0 auto; box-sizing: border-box; color: #fff; line-height: 250%;}

#sale .inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto ;
  padding: 0 auto;
  text-align: center;
  z-index: -9999;
}

#sale .ttl {
  width: 100%;
  max-width: 460px;
  margin: 3% auto 0 ;
  padding: 3% auto 0;
  box-sizing: border-box;
}
#sale img{
  width: 100%;  margin: 0;
	}

#sale .item-name {
  font-size:0.9rem;
  line-height: 140%;
  height: 60px;
  margin: 0 auto 0;
}

#sale .btn {
	width:85%;
    font-weight:bold;
    display:block;
    text-align:center;
    padding: 1%;
    margin: 2% auto 50px;
    color:#fff;
    background-color:#bb872a;
    border-radius:25px;
    font-size: 1.2rem;}

#sale .btn a:hover{
    background-color:#075e2e;
	text-decoration:none;
}

#sale .btn img{
	width:22px; padding:5px 8px 0 0;}

#sale .btn a{
    color:#fff; text-decoration: none!important;}

#sale .comment { font-size:1.5rem; margin:2% auto;}
#sale .bn{
	width:96%; max-width: 600px; padding:5px auto; margin: 0 auto;}

@media screen and (max-width:768px), print {

}







/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 30px; font-size: 1.0em;}

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }

/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}*/

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 800px) {
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 767px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}




/* ****************************************************

	main

***************************************************** */
.tuiju	{
  background: #fff;
  z-index: 9999;
  height: auto;
  position: fixed;
  right: 0;
  bottom: 0;}

.tuiju img { width:100%; float: left;}

@media screen and (max-width:768px), print {


}
.btn01{
  width:150px;
  height: auto;
  position: fixed;
  right: 50px;
  bottom: 50px;
}

/* フェードイン関係　画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
.fadeinleft {
    opacity : 0.1;
    transform : translate(-50px, 0);
    transition : all 500ms;
    }
.fadeinright {
    opacity : 0.1;
    transform : translate(50px, 0);
    transition : all 500ms;
    }
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.fadeinleft.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.fadeinright.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/* ****************************************************

	footer

***************************************************** */
.footer{ background-color:#F2F2F2; color:#0C1B30; padding-top:3%; padding-bottom:5%; text-align:center; line-height: 120%; }
.body footer .ttl{ padding:1%; margin:0 auto 3%; font-size: 0.9rem; border: solid 1px; width: 300px; }
.footer-nav { display: flex; justify-content: center; font-size: 0.8rem; max-width: 1000px; margin: 0 auto;}
.footer-sk { padding: 1%; border-right: 1px solid #333; width: 30%;}
.footer-ss { padding: 1%; border-right: 1px solid #333; width: 30%;}
.footer-tokai { padding: 1%; width: 30%;}
.company-logo img { max-width: 100%; }
.footer-nav p { padding: 8px 0;}
.company-name { padding:0 0 1%; font-size:1.1rem;  font-weight:600;}

.tel { font-size: 1.5rem; font-weight: 600; margin: 3px 0; }

@media screen and (max-width:768px), print {
.body footer .ttl{ margin:3% auto 0;}
.footer-nav { display: block; }
.footer-sk { border-right: none; width: 100%;}
.footer-ss { border-right: none; width: 100%;}
.footer-tokai { width: 100%; border:none;}
.company-logo img { max-width: 140px; padding-top:70px;  }
.footer-nav p { padding: 2px 0;}
.tel { font-size: 1.1rem; font-weight: 600; margin: 3px 0; }

}





/*EC-CUBE対策*/
#contentInner{
  width: auto;
  padding: 0;
}
#about .text,
#main .text{
  background: none;
    border: 0;
    color: #fff;
}
#main .midasi,
#main .text p,
.middle,
#sale .comment,
#sale .item-name{
  color: #fff;
}
#footer_nav{
  margin-top: 0;
}
.description{
  color: #fff!important;
}
.fa-angle-right:before{
  color: #fff;
}
.company-logo img{margin:auto;}
.smart-pagetop{margin-top: 0;}


@media screen and (max-width:768px), print {
#sale .btn{
  width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
}