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

	layout



hr { height: 5px;
 background-color: #161616;
 width: 10%;
 border: none; margin: 2% auto 4% auto; }
.red { color:#9C1F24; }
.yellow { color:#dbaa49; }
.small { font-size: 0.8em; line-height: 120%; }
.big { font-size: 1.2em; font-weight: 600; margin: 3px 0; }
.bold { font-weight: 600; }
a.btn-border {
  border-radius: 30px;
  padding: 8px 10%;
  background: #E9BC4B;
  color: #13564D;
}
a.btn-border:hover {
  color: #fff;
  background: #552126;
}
.itemname p{
  font-size:1.0em; line-height: 180%; padding-bottom: 5px; padding-top: 5px; height: 80px;
}
.pc { display: block !important; }
.sp { display: none !important; }



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

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10%; 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; }

@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

@media screen and (max-width: 800px) {
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

@media screen and (max-width: 767px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}

@media screen and (max-width:768px), print {
body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, form, dl, dd, dt, section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.pc { display: none !important; margin: 0; padding: 0; }
.sp { display: block !important; margin: 0; padding: 0; }
}


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

	main

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

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

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

.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

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

	section:title

***************************************************** */
#title { margin: 0 auto; padding: 0 auto; box-sizing: border-box; width: 100%; line-height:0; background-color:#F5E8D8; position:relative; z-index: -9999; height:880px;}

#title .inner {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 auto;
}
#title img { width: 100%; }

#title .bg_left { width: 33%; position: absolute; top: 0; left: 0; padding: 0 auto; margin: 0 auto; z-index: -9998; }
#title .bg_right { width: 33%; position: absolute; top: 0; right: 0; padding: 0 auto; margin: 0 auto; z-index: -9998; }
#title .bg_bottom { width: 100%; position: absolute; bottom: 0; right: 0; padding: 0 auto; margin: 0 auto; z-index: 9999; }


#title .logo { width: 93%; max-width: 750px; position: absolute; text-align: center;  left: 0; right: 0; margin: 20px auto; z-index: -9997; }
#title .santa { width: 30%; max-width: 400px; position: absolute; bottom: 6%; left: 1%; padding: 0 auto;  z-index: -9997; }
#title .tona { width: 30%; max-width: 480px; position: absolute; bottom: 2%; right: 1%; padding: 0 auto; z-index: -9997; }
#title .ttlbox { width: 96%; max-width: 800px; position: absolute; left: 0; right: 0; top: 10%; margin: auto;}

#title .bound{
  position: absolute;
  top: 12%; left: 25%;
  padding: 0 auto;
  margin: 0 auto;
  z-index: 2;
  display:inline-block;
    -webkit-animation: key1 2s linear 0s infinite;
    animation: key1 2s linear 0s infinite;
}
@-webkit-keyframes key1{
  0% {transform: translateY(0px);}
  6% {transform: translateY(-10px);}
  12% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

#title .animation {
	opacity: 0;
    animation: fadein 1.5s ease forwards;}

@keyframes fadein { 100% {  opacity: 1;}
}

#title .faderightin {
animation-name: faderightinAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes faderightinAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

#title .fadeleftin {
animation-name: fadeleftinAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeleftinAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

#title .fadeDown {
animation-name: fadeDownAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*以下遅延の指定*/
#title .delay05 { animation-delay: 0.5s;}
#title .delay1 { animation-delay: 1s;}
#title .delay14 { animation-delay: 1.4s;}
#title .delay16 { animation-delay: 1.6s;}
#title .delay18 { animation-delay: 1.8s;}
#title .delay2 { animation-delay: 2s;}
#title .delay22 { animation-delay: 2.2s;}
#title .delay24 { animation-delay: 2.4s;}
#title .delay26 { animation-delay: 2.6s;}
#title .delay25 { animation-delay: 2.5s;}

@media screen and (max-width:1024px), print {
#title .bound{ top: 15%; left: 10%; width: 15%; }
#title .santa { width: 30%; bottom: 0; left: -40px;}
#title .tona { width: 30%; bottom: 0; right: -40px;}
}

@media screen and (max-width:599px), print {
#title { height:570px; }
#title .inner {
  padding-top: 0;
  padding-bottom: 0;
}
#title .bound{ top: 15%; left: 10%; width: 15%; }
#title .santa { width: 48%;bottom: 0; left: 0px;}
#title .tona { width: 48%; bottom: 0; right: 0px;}
}


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

	section:about

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

#about { background-image: url( "../images/pt_bg.png" ) ; margin: 0 auto; color: #fff;  background-color: #458037; padding: 0 auto; line-height: 180%;}

#about .inner {
  width: 96%;
  max-width: 960px;
  margin: 0 auto ;
  padding-top: 1%;
  padding-bottom: 5%;
  text-align: center;
}

#about .message { font-size:1.5em; margin: 5% auto;}
#about .btnbox {
  position: relative; width: 100%; max-width: 500px; margin: 0 auto 10px;
  padding: 20px auto;

}
#about a.btnbig {
  border-radius: 30px;
  font-size:1.2em;
  background: #E9BC4B;
  padding: 20px 60px;
  color: #13564D;
  display: block;
}
#about a.btnbig:hover {
  color: #fff;
  background: #552126;
}
#about .snowman { position: absolute; top: -20px; right: 0; z-index: 9998; }
#about .taisho { position: absolute; top: -50px; ledt: 0; z-index: 9998; }
#about img{ width: 100%;}
#about .movie {
  max-width: 640px;
  margin: 0 auto 8%;
}

#about .yellow {

	color:#dbaa49;
	font-size:1.2em;
	font-weight:500;
	text-decoration: none;
}

#about .itemname p{
  font-size:1.0em;
	color: #FFFFFF!important;
	ine-height: 180%;
	padding-bottom: 5px;
	padding-top: 5px;
	height: 80px;
}

#about a.btn-border {
  border-radius: 30px;
  padding: 8px 10%;
  background: #E9BC4B;
  color: #13564D;
}

@media screen and (max-width:599px), print {
#about .inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
#about .message { font-size: 1.0em; }
#about .taisho { width: 30%; top: -40px; ledt: 0; z-index: 9998; }
#about a.btnbig { font-size:1.0em; }
#about .btnbox {
  position: relative; width: 100%; max-width: 500px; margin: 60px auto;
}
}
/* ****************************************************

	section:apply

***************************************************** */
#apply { box-sizing: border-box; background-color:#F5E8D8; }

#apply .inner {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto ;
  padding-top: 5%;
  padding-bottom: 5%;
  text-align: center;
  z-index: -9999;
  line-height: 180%;
}
#apply .box {
	margin: 5% auto ;
	padding: 5% auto;
	width: 100%;
	background-color: #fff;
	text-align: left;
	border-radius: 10px;
	box-sizing: border-box;
	display: flex;
  }

#apply .ttl {
  max-width: 100%;
  margin: 2% auto ;
  padding: 2% auto;
  display: inline-block;
}

#apply .table_line {
	display: table;
	margin: 3% auto ;
    padding: 3% auto ;
	width: 100%;
	}

#apply .block_l {
	display: table-cell;
	width: 180px;
	padding: 1% 3%;
	}

#apply p {
	padding: 0 auto 0;
	margin: 0 auto 10px;
	}

#apply .item {
	background-color: #2A7338;
	width: 140px;
	padding: 3% auto ;
	color: #fff;
	border-radius: 5px;
	font-size: 0.8em;
	text-align: center;
	margin-right: 30px;
	}
#apply .date {
	font-size: 1.2em;
	font-weight: 600;
	}
#apply .block_r {
		display: table-cell;
		max-width: 700px;
	}
#apply img{
	margin: 30px auto 0 ;
    padding: 20px auto 0 ;
	}
#apply .share{
	width: 120px;
	margin: 0 auto ;
    padding: 0 auto ;
	text-align: center;
	}
#apply .sns-icon{
	max-width: 38%;
	padding: 1% ;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto ;
    padding: 0 auto ;
	}

@media screen and (max-width:768px), print {
#apply .box {
	display:block;
  }
#apply .table_line {
	display: block;
	margin: 3% auto ;
    padding: 3% ;
	width: 96%;
	max-width: 800px;
	}

#apply .block_l {
	display: block;
	width: 100%;
	padding: 1% auto;
	}
#apply .block_r {
	display: block;
	width: 100%;
	padding: 3%;
	}
#apply .item {
	width: 100%;
	padding: 2% auto ;
	font-size: 1.0em;
	}
#apply .awardtitle img{
	width: 350px;
	}

#apply .sns-icon{
	width: 80%;
	max-width: 300px;
	padding: 1% ;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto ;
    padding: 0 auto ;
	}
}



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

	section:sale

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

#sale { background-image: url( "../images/pt_bg.png" ) ; margin: 0 auto;color: #fff; line-height: 0; background-color: #1E763B;}

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


#sale img{ max-width: 100%; margin: 0; padding: 8px; }

#sale p {
  font-size:0.9em;
  line-height: 140%;
  margin: 0 auto 10px;
}
#sale .kuripura { max-width: 100%; margin: 0 auto 5%;}
#sale .comment { font-size:1.5em; padding-top: 15px; padding-bottom: 30px; }
#sale .bn{ width:96%; max-width: 600px; padding:　5px auto; margin: 0 auto;}

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


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

	footer

***************************************************** */
.footer{ background-color:#fff; padding-top:5%; padding-bottom:2%; text-align:center; line-height: 180%;}

.footer-nav { display: flex; justify-content: center; font-size: 0.8em; max-width: 1000px; margin: 0 auto;}
.footer-sk { padding: 1%; border-right: 1px solid #5B3E22; width: 30%;}
.footer-ss { padding: 1%; border-right: 1px solid #5B3E22; 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.1em;  font-weight:600;}
.footer .copy{ padding:2% 0 4%;}


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

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

@media screen and (max-width:768px), print {
.footer-nav { display: block; }
.footer-sk { margin: 3% auto; border-bottom: 1px solid #5B3E22; border-right: none; width: 100%;}
.footer-ss { margin: 3% auto; border-bottom: 1px solid #5B3E22; border-right: none; width: 100%;}
.footer-tokai { margin: 3% auto; width: 100%; border:none;}
.company-logo img { max-width: 140px; }
.footer-nav p { padding: 2px 0;}
}


.c-header > .l-container {
    width: 120rem !important;
}

main.l-container {
    width: 100%;
padding-left: 0;
padding-right:0;
}

#wide_main_contents {
    width: 100%;
}

#contentInner {
    width: 100%;
}

#main-content {
    background: none;
}