:root {
  --color-bg: #f8f5f0;
  --color-bg-alt: #f1e6d6;
  --color-brown: #6a4a3c;
  --color-wood: #dcc7a1;
  --color-green: #3d5544;
  --color-text: #333333;
  --color-muted: #777777;
  --max-width: 1080px;
}

/* ------------------------------
 .google-feed
------------------------------ */

.google-feed{
	width: 90%;
	margin: 0 auto
}




a.more{
	border: solid 2px var(--color-main);
	border-radius: 50px;
	position: relative;
	display: block;
	text-align: center;
	padding: .8em;
	color: var(--color-main);
}

a.more:hover{
	background: var(--color-main);
	color: #fff
}

a.more:after{
	font-family: icomoon;
	content: "\e977";
	padding-left: .5em
}

@media print, screen and (min-width: 768px) {
	a.more{max-width: 400px;margin: 0 auto}
}


/* ------------------------------
 hero
------------------------------ */

.hero {
  position: relative;
  padding-top: 72px; /* headerぶん */
  min-height: 80vh;
  background: #000;
  color: #ffffff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/works/D71Q4273A.jpg"); /* 差し替え */
  background-size: cover;
  background-position: center;
  opacity: 0.75;
}

.hero-content {
  position: relative;
  padding: 100px 20px 80px;
}

.hero-title {
  font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.625rem, 1.307rem + 1.59vw, 2.5rem);
  line-height: 1.4;
  margin-bottom: 20px;
}

.hero-copy {
  font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);
  max-width: 520px;
  margin-bottom: 32px;
  letter-spacing: .1em
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-scroll {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}





/* ------------------------------
 intoro
 
------------------------------ */

.tmin{
font-family: "ten-mincho-text", serif;
font-weight: 400;
font-style: normal;
}

.kibakoimg{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	position: relative;
	align-items: center;
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	background-position: center center;
}

.kibakoimg span{position: absolute;
	z-index: 100
}

.kibakoimg span.c1{bottom: -50px}
.kibakoimg span.c2{bottom: -180px}



.kibako_title{
	background: #f7f4eb;
	padding: 200px 5% 10%;
	text-align: center;
}

.kibako_title > div{
	position: relative;
	max-width: 900px;
	margin: 0 auto
}


.teigaku{
	background: #ED5D03;
	border-radius: 50%;
	color: #fff;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.teigaku span{
	border-bottom: solid 1px #fff;
	font-size: 22px;
	display: block;
	padding-bottom: 5px
}


.kibako_title h1{margin-bottom: 2em}

.kibako_title h1 span{
	display: block;
	font-size: 1.5em;
	margin-top: 10px
}

.kibako_concept{padding: 10%}

.kibako_concept h2{font-size: 1em;text-align: center;
	margin-bottom: 2em
}
.kibako_concept h2 span{
	display: block;
	font-size: 2em;
	margin-bottom: 12px
}


.kibako_concept ul li h3{text-align: center;
	padding: 1em .5em .8em;
	font-size: 1.5em
}

.kibako_concept ul li img{
	width: 100%;height: auto
}

@media screen and (max-width: 667px) {
	.kibakoimg span{width: 300px;}
	.kibako_title img{width: 180px;height: auto}
	.kibako_concept ul li{margin: 2em auto 3em;}
	
	.teigaku{
		margin: 0 auto 1.5em
	}
}	

@media print, screen and (min-width: 668px) {
	
	.kibakoimg{}
	.kibakoimg span{width: 300px}
	.kibakoimg span.c1{bottom: -50px;left: 10%}
	.kibakoimg span.c2{bottom: -180px;right: 10%}
	.teigaku{
		position: absolute;
		left: 5%;
		top:-50px;
		width: 120px;
		height: 120px;}
	.teigaku span{font-size: 30px}
	.kibako_title h1{font-size: 25px}
	.kibako_title img{width: 280px;height: auto}
	.kibakoimg span.c1{}
	.kibakoimg span.c2{}
	
	.kibako_concept{padding: 10% 5% 5%}
	.kibako_concept h2 span{font-size: 36px}
	.kibako_concept ul{
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
	}
	.kibako_concept ul li{
	width: calc(( 100% - 80px ) / 3 );
	margin-right: 40px;
	}
	
	.kibako_concept ul li:nth-child( 3n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 1024px) {
	.kibako_concept{padding: 10% 10% 8%}
	.kibakoimg span{width: 38%}
	.kibakoimg span.c1{bottom: -70px;left: 10%}
	.kibakoimg span.c2{bottom: -130px;right: 10%}
	.kibako_title img{width: 400px;height: auto}
	.teigaku{
		width: 150px;
		height: 150px;}
}	




.kibako_gallery{
	padding: 5% 0 0;
}


.kibako_gallery ul{
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
}

@media screen and (max-width: 667px) {
	.kibako_gallery ul li{
	width: calc(( 100% - 30px ) / 3 );
	margin: 15px 15px 0 0;
	}
	
	.kibako_gallery ul li:nth-child( 3n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 668px) {
	.kibako_gallery ul li{
	width: calc(( 100% - 80px ) / 3 );
	margin: 40px 40px 0 0;
	}
	
	.kibako_gallery ul li:nth-child( 3n ) {margin-right: 0;}
}	

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








/* ------------------------------
 hero
------------------------------ */

:root {
  --orange: #f39800;
  --text-main: #333333;
}

.points-section,
.point {
  text-align: center;
}

.points-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 8% 0;
}

.points-header{
	margin-bottom: 3%;
	padding: 0 2em;
}

/* 見出し */
.points-header h2 {
  margin: 0 0 1em;
  font-size: clamp(1.375rem, 1.057rem + 1.59vw, 2.25rem);
  font-weight: 700;
}

.points-header h2 span {
  color: var(--orange);
  font-size: 1.5em;
  margin: 0 4px;
}

/* 説明文 */
.points-header p {
  margin: 0 0 2em;
  line-height: 1.8;
}

.highlight {
  background: linear-gradient(transparent 60%, rgba(243, 152, 0, 0.25) 60%);
  font-weight: 700;
}

@media screen and (max-width: 767px) {
	.points-header p br{
		display: none
	}
	.points-header p{
		text-align: left
	}
}	

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

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




/* 3つのポイントコンテナ */

ul.points-list{
	margin: 0 auto
}


/* 各ポイント */
ul.points-list li {
	position: relative;
  width: 100%;
  border: 2px solid var(--orange);
  margin: 0 auto 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 1em.5em
}

.point-number{
	display: block;
	position: absolute;
	font-size: 2.5em;
	font-weight: 700;
	color: var(--orange);
	z-index: 20;

}

ul.points-list li p {
  font-size: clamp(1.063rem, 0.881rem + 0.91vw, 1.563rem);
  font-weight: bold;
  line-height: 1.6;
}


@media screen and (max-width: 767px) {
	ul.points-list{
	width: 90%;
	}
	
	ul.points-list li p br{
		display: none
	}
	
	ul.points-list li {
		justify-content: flex-start;
		padding: 1em 1em 1em 4em;
	}

	.point-number {left: .5em;font-size: 2em;}
}	

@media print, screen and (min-width: 768px) {
	.points-header p{margin: 0 0 4em;}
	ul.points-list {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 5%;
	}
	ul.points-list li {
		flex: 1;
		min-width: 0;
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
	  border-radius: 50%;
	}
	
	.point-number {
	top:-.3em;
	}
	
	.point-number::before{
	content: "";
	  position: absolute;
	  width: 2.3em;
	  height: 2.3em;
	  background: #fff;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%); /* 数字の中央に四角を置く */
	  z-index: -1;
	}


}	

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








/* ------------------------------
 point
------------------------------ */

.point{
	position: relative;
	padding: 20% 5% 5%
}




.point.p01,
.point.p03{
	background: #f7f4eb
}


.point-wrap > h3{
	font-size: clamp(1.25rem, 1.091rem + 0.8vw, 1.688rem);
	font-weight: 700;
	margin-bottom: 1em
}

.point_read{margin: 0 0 3em}

.point_no {
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  color: rgba(83, 38, 3, 0.3);
  padding: 1em;
  z-index: 20
}

/* 数字（03） */
.point_no span {
  display: block;
  font-size: 2.4em;
  line-height: 1;}

/* 右上の三角形（オレンジ） */
.point_no::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;

  /* 三角形を作る */
  border-right: 90px solid transparent;
  border-top: 90px solid #f39800;
  z-index: -1
}


@media screen and (max-width: 767px) {
	.point_read{
		text-align: left
	}

}	

@media print, screen and (min-width: 768px) {
	.point_no{font-size: 34px;}
}	

@media print, screen and (min-width: 1024px) {
	.point{
	padding: 5%;
	}
}	


/* ------------------------------
 PLAN
------------------------------ */
/* ------------------------------
 kibako
------------------------------ */

.plan{}

.plan h2{text-align: center}


.plan > div{margin: 15% auto;
	text-align: center;
	background: #fff;
	padding: 2em;
	border-radius: 5px;
	position: relative;
	
}


.elevation dl{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		
	}

.elevation dl dt{
	font-size: 2em;
	text-align: center;
	margin-bottom: .5em;
	border-top: 1px solid rgba(72, 46, 51, 0.3);
	border-bottom: 1px solid rgba(72, 46, 51, 0.3);
	padding: 1em 8px
}
.elevation dl dt{
	width: 100%
}
.elevation dl dd{
	text-align: center;
	margin: .5em 8px
}
.elevation dl dt span{
	color: #ED5D03;
	font-size: .8em;
	padding-right: .8em
}

.elevation dl dd{
	font-size: 1.2em
}

.elevation dl dd span{
	font-size: 1.4em;
	padding-right: 3px
}
dl.shiyo{
	padding: 1em;
	margin-bottom: 3em;
	background: #f1eee7
}

dl.shiyo dt{
	font-size: 1.2em;
	margin-bottom: 1em
}


@media screen and (max-width: 767px) {
	
}	

@media print, screen and (min-width: 768px) {
	.plan h2{font-size: 28px}
	.plan > div{margin: 5% auto;
		max-width: 1200px;
	}
	.elevation{
		display: flex;
		flex-wrap:wrap;
		align-items: center
	}
	.elevation dl{width: 30%;padding-right: 5%}
	.elevation img{width: 70%}
	dl.shiyo{padding: 2em}
}	

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

/* ------------------------------
 POINT01
------------------------------ */

/* Plans */
.plans-tabs {
  display: flex;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px;
  margin: 1.5em auto;
  border: 1px solid #e0d7c6;
  width:-moz-fit-content;
  width:fit-content;
}

.plans-tabs .tab {
  border: none;
  background: transparent;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
}

.plans-tabs .tab.active {
  background: var(--color-green);
  color: #ffffff;
}




.plans-panels {
  position: relative;
}

.plans-panel {
  display: none;
  padding: 20px 0;
  animation: fadeIn 0.3s ease-in-out;
}


.plans-panel.is-active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




ul.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}



ul.plans-grid li {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 20px 24px;
}

ul.plans-grid li h3 {
  margin: 0 0 12px;
}

.plan-thumb {
  height: 140px;
  border-radius: 12px;
  background: #f6f3ec;
  margin-bottom: 12px;
}

.plan-text {
  font-size: 13px;
  color: var(--color-muted);
}



/* ------------------------------
 POINT02
------------------------------ */
:root {
  --spec-gray-head: #555555;
  --spec-green-head: #00794c;
  --spec-brown-head: #5b3e22;
  --spec-row-label: #e2dfdb;
  --spec-row-alt: #f5eee3;
  --spec-border: #d0cbc5;
  --spec-orange: #f39800;
  --spec-font: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", sans-serif;
}


.spec-wrapper {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--spec-font);
  padding: 0;
}

/* テーブル共通 */
.spec-table-wrap {
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  table-layout: fixed;
  text-align: center;
  font-size: 14px;
}

.spec-table caption{
	text-align: left;
	font-weight: bold;
	margin-bottom: 1em;
	color: var(--color-point1);
	font-size: 1.2em
}

.spec-table th,
.spec-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--spec-border);
}

/* ヘッダー */
.spec-head {
  color: #fff;
  font-weight: 700;
  padding: 12px 8px;
}

.spec-head-label {
  background: var(--spec-gray-head);
  width: 25%;
}

.spec-head-order {
  background: var(--spec-green-head);
  width: 37.5%;
}

.spec-head-kibako {
  background: var(--spec-brown-head);
  width: 37.5%;
}

/* 左列（標準仕様） */
.spec-table tbody th[scope="row"] {
  background: var(--spec-row-label);
  font-weight: 700;
  text-align: center;
}

/* 通常セル */
.spec-table tbody td {
  background: #ffffff;
}

/* ベージュ強調セル */
.spec-table tbody td.spec-em {
  background: var(--spec-row-alt);
}

/* 下のオレンジ帯 */
.spec-option-bar {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
}

.spec-option-label {
  background: var(--spec-orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  text-align: center;
}

.spec-option-text {
  background: #fde1ba;
  font-size: 13px;
  padding: 12px 16px;
}

/* スマホ対応：横スクロール＆文字少し小さく */
@media (max-width: 768px) {
  .spec-section {
    padding: 32px 8px 40px;
  }

  .spec-table {
    font-size: 13px;
  }

  .spec-option-label,
  .spec-option-text {
    font-size: 12px;
  }
}




/* ------------------------------
 Point3
------------------------------ */
.power-compare {
  padding: 8% 5%;
    background: url(../img/taiyoko2.jpg) no-repeat center center;
    background-size: cover;
    text-align: center 
}

.power-compare > p{
	margin-bottom: 1.5em
}

.power-compare h2{
	margin-bottom: .5em
}

.power-compare__inner {
  max-width: 1000px;
  margin: 3% auto;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* カード共通 */
.power-card {
  border-radius: 12px;
  background: #fff;
  padding: 1.5em;
  position: relative;
}

.power-card__body {
  background: #ffffff;
}

/* ヘッダー（タブ風） */
.power-card__header {
  position: absolute;
  top: -18px;
  left: 24px;
  padding: 6px 18px;
  border-radius: 999px;
  background: #a9a7a7;
  color: #ffffff;
  font-weight: 700;
}

.power-card__header--new {
  background: #f06438;
}


/* 右カード */
.power-card--new {
  background: #f8eed6;
}

.power-card__body--new {
  border: none;
  background: transparent;
  padding: 24px 8px 8px;
}

/* 右上のキャッチコピー */
.power-card__message--new {
  text-align: left;
  font-size: 15px;
  margin: 0;
}

.power-card__em--strong {
  color: #f06438;
  font-size: 1.2em;
  font-weight: 700;
}

/* 中央の矢印 */
.power-compare__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  color: #999999;
  font-size: 24px;
}


@media screen and (max-width: 767px) {
	.power-compare > p{text-align: left;
		margin-bottom: 2em
	}
	.power-compare__inner{
		flex-direction: column
	}
	.power-compare__arrow,
	.power-card--old{
		display: none
	}
}	

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

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

/* ------------------------------
 benefit
------------------------------ */

.komikomi{}

.komikomi img{
	max-width: 580px;
	width: 100%;
	margin: 0 auto
}

.benefits{margin: 2em auto;}

.benefit-block{
	background: #fff;
	border-radius: 10px;
	position: relative;
	margin: 0 auto 1.5em;
	padding: 1.5em;
	max-width: 1000px
}

.benefit-block h3{
	width: 100%;
	border-top: solid 1px var(--orange);
	border-bottom: solid 1px var(--orange);
	padding: .5em;
	margin-bottom: 1em
}

.benefit-block h4{
	color: #901010;
	margin-bottom: 1em;
}

.benefit-text{}
.benefit-text p{
	text-align: left
}

.benefit-text ul{
	text-align: left
}

.benefit-text ul li{
	background: #e8e8e8;
	padding: .6em;
	margin: 5px 0 0;
}

.benefit-text ul li::before{
	font-family: icomoon;
	content: "\e977";
}

.hosho figcaption{font-weight: bold;
	display: block;
	margin: .8em 0 0;
}
.hosho figcaption span{
	color: #901010;
	font-size: 1.8em;
	padding: 0 5px
}

@media screen and (max-width: 767px) {
	.benefit-text{padding: 1em 0;}
	.komikomi{width: 80%;margin: 0 auto}
}	

@media print, screen and (min-width: 768px) {
	.benefit-block{padding: 2em}
	.benefit-block h4 br{
		display: none
	}
	.benefit-block{
		display: flex;
		flex-wrap: wrap;
		gap:30px;
	}
	.fleximg{flex: 1}
	.benefit-text{flex: 1}
}	

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

/* ------------------------------
#pickup
------------------------------ */
#pickup{
	margin: 0 auto;
	padding: 8% 0
}

#pickup h2{
	text-align: center;
	padding: 0 1em;
	margin-bottom: 1em;
	color: #174c28;
	letter-spacing: 1px;
	font-size: 1.8em
}



#pickup li .kaisai{
	line-height: 1.6em;
	margin-bottom: 5px
}




.topicswiper{position: relative;
	overflow: hidden;
	padding-bottom: 3em
}

#pickup .more_event{margin: 1.5em auto 0}

#pickup .more_event a{
	display: flex;
	justify-content: center;
	padding: 1em;
	border: solid 1px #482f33
}

#pickup .more_event a:after{
	font-family: icomoon;
	content: "\e97b";
	padding-left: 1em;
	font-size: .8em
}

#pickup .more_event a:hover{
	background: #482f33;
	color: #fff
}

#pickup .more_event a:hover:before{
	color: #fff
}

#pickup .closed_img{
	opacity: .6
}

.event_title{
	padding: .8em 0 0;
	font-size: .9em
}


.event_title h3{
	font-size: .938rem
}

.event_title h3 a br{
	display: none
}

.closedtxt{
	color: #a5a5a5
}


.imgwrap{
position: relative;
aspect-ratio: 4/4;
max-height: 400px;
}

.imgwrap img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.gcal{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3%
}


@media screen and (max-width: 667px) {
	#pickup{padding: 10% 0 0 0}
	#pickup h2{}
	.topicswiper{padding: 0 0 0 5%}
	#pickup .more_event{margin: 1.5em 5% 0}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
	right: 0;
	}
	
	.gcal{padding: 5% 3%}
	
}	

@media print, screen and (min-width: 668px) {
	#pickup{max-width: 1200px;padding: 5% 0}
	#pickup h2{font-size: 30px;margin-bottom: 1.5em;}
	#pickup .more_event{max-width: 300px;margin: 3em auto 0}
	
	.pick_img{
	width:auto;
/* 	height: 320px */
	}

}	


.swiper-button-next, .swiper-button-prev{
	background: #fff
}








/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.1s ease;
}

.btn-primary {
  background: var(--color-green);
  color: #ffffff;
  border: solid 1px #fff
}

.btn-primary:hover {
  background: #2f4136;
  transform: translateY(-1px);
}

.btn-outline {
  background: #ffffff;
  color: var(--color-green);
  border-color: var(--color-green);
}

.btn-outline:hover {
  background: #f5f9f7;
}

.cta{
	margin: 2em auto
}



/* ------------------------------
 intoro
------------------------------ */

#intoro{position: relative}

#video_wrap{
	position: relative;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	
}

video{display: block;
	object-fit: cover;
	width: 100%
}


.swiper {
  overflow: hidden;
  margin-left: 0
}



@keyframes zoom {
  from {
    transform: translateX(0px) scale(1.2);
  }
  to {
    transform: translateX(20px) scale(1.2);
  }
}


@media screen and (max-width: 767px) {	

	.swiper .swiper-wrapper .swiper-slide-prev img,
	.swiper .swiper-wrapper .swiper-slide-active img,
	.swiper .swiper-wrapper .swiper-slide-duplicate-active img {
		
	  object-fit: cover;
	   width: 100%;
	   height: calc(100vh - 50px);
	}
}


@media print, screen and (min-width: 768px) {
	.swiper .swiper-wrapper .swiper-slide-prev img,
	.swiper .swiper-wrapper .swiper-slide-active img,
	.swiper .swiper-wrapper .swiper-slide-duplicate-active img {
	  object-fit: cover;
	   width: 100%;
	}
	
	.ssimg{
	position: relative;
	height: 100vh
	}
	
	.ssimg img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

}	


	
.swiper_wrap{
	position: relative
}


.copy{
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: #fff;
	width: 100%;
	text-align: center;
	padding-top: 45vh;
	font-size: clamp(1.5rem, 1.023rem + 2.39vw, 2.813rem);
	font-weight: normal;
	line-height: 1;
	text-shadow: 0px 0px 7px rgba(135, 135, 135, 1);
}

.logo{
	width: 30%;
	max-width: 200px;
	position: absolute;
	z-index: 50;
	bottom: 50px;
	left: 0;
	right: 0;
	margin: 0 auto
}

.logo::after{
	padding: 20% 0 0;
	width: 100%;
	display: block;
	content: " ";
	background-size:contain;
	background-image: url(../img/typo.svg);
	background-position: center center;
	background-repeat: no-repeat
}

@media print, screen and (min-width: 768px) {
	.copy{padding-top: 50vh;}
	.logo{width: 25%;max-width: 200px;}
}	





.sec_title{
	text-align: center;
	margin-bottom: 2.5em;
	color: var(--color-main);
}

.sec_title span{
	display: block;
	font-size: 1.4rem;
	letter-spacing: .1em
}



ul.ban li{position: relative}

.ban .ss_i img{
	width: 100%;
	height: auto
}


	
@media screen and (orientation: landscape) {

}
	

@media screen and (max-width: 767px) {
	ul.ban{padding: 5px 5px 0}
	ul.ban li:not(:last-child){margin-bottom: 5px}
	.ban .ss_i{
	display: block;
	width: 100px;
	bottom: 60px;
	left: 20px;
	z-index: 30;
	position: absolute;
	animation: pyonpyon 3s infinite ease;
	}

}	

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



	ul.ban{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		z-index: 100;
		width: 80%;
		max-width: 1000px;
		margin: 5% auto 0;
	}
	ul.ban li{
		width: 48%;
	}
	
	ul.ban li img{
		width: 100%;
		height: auto
	}
	
	.ban .ss_i{
	display: block;
	width: 180px;
	left: 20px;
	bottom: -40px;
	z-index: 30;
	position: relative;
	animation: pyonpyon 3s infinite ease;
	}

}

@media print, screen and (min-width: 1240px){
	ul.ban li{
		max-width: 600px;
	}
}





/* ------------------------------
 #type
------------------------------ */

#type{
	background: #ddeaea;
	padding:  6%
}




.type_list{
	margin: 0 auto
}

.type_list > div{
	background: #fff;
	text-align: center;
	box-shadow: 1px 1px 6px #ccc;
	position: relative;
}

.type_list > div > div{
	padding: 1.5em
}

.type_list .more{
	margin: 1em auto 0
}

@media screen and (max-width: 767px) {
	.type_list div:first-child{
		margin-bottom: 2em
	}
}	

@media print, screen and (min-width: 768px) {
	.type_list{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	max-width: 1000px;
	}
	
	.type_list > div{
		width: 47%;
	}
}	

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


/* ------------------------------
 features
------------------------------ */	
#features{
	text-align: center
}



.features_company{
	text-align: center;
	padding: 3em 1em;
}

.features_company p{
}





.features_read ul{
	display: flex;
	justify-content: center;
}


.features_read > div{
	text-align: left
}

.features_read > div h1{
	margin-bottom: 1.2em;
}

.features_read > div .more{
	margin: 1em 0 0 0
}


@media screen and (max-width: 1023px) {
	.features_read > div{
		padding: 1.6em
	}
	.features_read p br{display: none}
}	

@media print, screen and (min-width: 768px) {
	.features_read{}
	.features_company{
		display: flex;
		justify-content: center;
		align-items: center}
	.features_company img{width: 300px}
	.features_company p{padding:0 20px;}
	

	.features_read{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
		align-items: center
	}
	
	.features_read > div{
		padding: 2em 5%;
		width: 50%
	}
	
	
	.features_read > ul{
		width: 50%;
	}
	
	
}

@media print, screen and (min-width: 1680px) {

	.features_read{
		max-width: 1360px;
		margin: 0 auto
	}
	
	.features_read > div{
		width: calc(100% - 600px);
	}
	.features_read > ul{max-width: 600px}
	
}	





/* ------------------------------
#pickup
------------------------------ */
#pickup{
	margin: 0 auto;
	padding: 10% 0 8%
}

#pickup h2{
	text-align: center;
	padding: 0 1em;
	margin-bottom: 1em;
	color: var(--color-main);
	letter-spacing: 1px;
	font-size: 1.8em
}



#pickup li .kaisai{
	line-height: 1.6em;
	margin-bottom: 5px
}




.topicswiper{position: relative;
	overflow: hidden;
	padding-bottom: 3em
}

#pickup .more_event{margin: 1.5em auto 0}

#pickup .more_event a{
	display: flex;
	justify-content: center;
	padding: 1em;
	border: solid 1px #482f33
}

#pickup .more_event a:after{
	font-family: icomoon;
	content: "\e97b";
	padding-left: 1em;
	font-size: .8em
}

#pickup .more_event a:hover{
	background: #482f33;
	color: #fff
}

#pickup .more_event a:hover:before{
	color: #fff
}

#pickup .closed img{
	opacity: .6
}

.event_title{padding: .8em 0 0;
	font-size: .9em
}
.closedtxt{
	color: #a5a5a5
}


@media screen and (max-width: 667px) {
	#pickup{padding: 10% 0}
	#pickup h2{}
	.topicswiper{padding: 0 0 0 5%}
	#pickup .more_event{margin: 1.5em 5% 0}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
	right: 0;
	}
	
}	

@media print, screen and (min-width: 668px) {
	#pickup{max-width: 1200px;padding: 5% 0}
	#pickup h2{font-size: 30px;margin-bottom: 1.5em;}
	#pickup .more_event{max-width: 300px;margin: 3em auto 0}
}	


.swiper-button-next, .swiper-button-prev{
	background: #fff
}



/* ------------------------------
#works
------------------------------ */

#works{
	padding: 0 0
}

h2.lefth2{
	margin-bottom: 1em;
	border-bottom: solid 2px #707070;
	padding:0 1em .5em 6%;
	width:-moz-fit-content;
	width:fit-content;
	font-size: 24px;
	letter-spacing: 1px
}


h2.lefth2 span{font-size: .7em;padding-left: 20px;}


#works .swiper-slide{}

#works .swiper-slide img{
	object-fit: cover;
   width: 100%;
}

.workswiper{
	overflow: hidden;
	position: relative;
	padding: 0 20px 20px;
	margin: 0 auto
}


.worksnew{
	position: relative;
	-webkit-box-shadow:1px 1px 6px #ccc;
	-moz-box-shadow:1px 1px 6px #ccc;
	box-shadow: 1px 1px 6px #ccc;
	border: solid 1px #eee
}

.worksnew > div:nth-child(1){
	position: relative;
}

.worksnew > div:nth-child(1) img{
	object-fit: cover;
	width: 100%;
}
.worksnew > div:nth-child(2){padding: 1.2em 1em 1em}


.worksnew .no{
	font-size: 20px;
	display: block;
	color: rgba(72, 46, 51, 0.6)
}
.worksnew > div h3{
	font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem)
}

.worksnew > div p{
	font-size: .9em;
	margin-bottom: 1em
	
}



#works .more{margin: 1.5em auto 3em;}




@media screen and (max-width: 767px) {
	.workswiper{margin: 0 auto}
	.workswiper .swiper-button-prev,
	.workswiper .swiper-button-next{
		display: none
	}
	.worksnew{min-height: 300px}
	.scroll-nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-left: 5%;
	scrollbar-width: none;
	}
	
	.scroll-nav::-webkit-scrollbar {
		display:none;
	}
/*
	ul.works_themeli li{min-width: 60%}
	ul.works_themeli li{margin-right: 1em}
*/


	ul.works_themeli li{
	width: calc(( 100% - 10px ) / 2 );
	margin:0 10px 10px 0;
	}
	
	ul.works_themeli li:nth-child( 2n ) {margin-right: 0;}
}	

@media print, screen and (min-width: 768px) {
	h2.lefth2{
		margin-bottom: 5%;
		font-size: 36px;
		width: 70%
	}
	
	
	#works .swiper-slide{}
	#works .swiper-slide img{
		object-fit: cover;
	   width: 100%;
	   height: 40vh;
	   max-height: 300px
	}
	
	
	.workswiper{padding: 0 70px 50px;}
	
	.worksnew{
	}
	.worksnew .no{font-size: 30px}
	.worksnew > div h3{font-size: 1.1em;}
	.worksnew > div:nth-child(1) img{height: 30vh;}
	.worksnew > div:nth-child(2){padding:1.5em;height: 120px;}
	ul.works_themeli{flex-wrap:wrap;}
	ul.works_themeli li{
	width: calc(( 100% - 60px ) / 4 );
	margin:0 20px 10px 0;
	}
	
	ul.works_themeli li:nth-child( 4n ) {margin-right: 0;}
	ul.works_themeli li a{padding: .8em .8em;}
}	

@media print, screen and (min-width: 769px) {
	.workswiper{margin: 0 5% 0;}
	ul.works_themeli{margin: 1em auto}
	.worksnew {}
	.worksnew > div:nth-child(2){padding: 1em}
}

@media print, screen and (min-width: 1240px) {
	h2.lefth2{width: 50%}
	.worksnew > div:nth-child(1) img{height: 50vh;max-height: 400px;}
}



/* ------------------------------
 maincontents
------------------------------ */
#maincontents{
	margin-bottom: 6%;
	padding: 5% 0 0;
}

#maincontents ul li{text-align: center;}

#maincontents ul li h2{
	position: relative;
	margin: 1em 1em 30px;
	font-size: 1.3em
}
#maincontents ul li p{margin: 0 1em;line-height: 1.3em}
#maincontents ul li h2:after{
	content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: block;
  width: 60px;
  height: 2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color:rgba(23, 77, 40, 0.4);
  border-radius: 2px;
}



#maincontents ul li img{
	object-fit: cover;
	width: 100%;
	height: 200px
}

@media screen and (max-width: 667px) {
	#maincontents{margin-bottom: 10%}
	#maincontents ul li{padding-bottom: 10%}
	#maincontents ul li p{}
}	

@media print, screen and (min-width: 668px) {
	#maincontents ul{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin: 0 auto
	}
	
	#maincontents ul li{
	width: calc(( 100% - 20px ) / 2 );
	margin:0 20px 20px 0;
	}
	
	#maincontents ul li:nth-child( 2n ) {margin-right: 0;}


	#maincontents ul li img{height: 200px}
	#maincontents ul li h2{font-size: 24px}
}	

@media print, screen and (min-width: 1024px) {
	#maincontents ul li img{height: 230px}
	#maincontents ul li{
	width: calc(( 100% - 60px ) / 2 );
	margin:0 60px 60px 0;
	}
}	


@media print, screen and (min-width: 1240px) {
	#maincontents ul li img{height: 250px}
}	




/* ------------------------------
 banners
------------------------------ */
ul.reco_ban{
	max-width: 980px;
	margin: 0 auto
}



#home .tatetala_info{
margin:0 auto 5%;
text-align: center;
max-width: 980px;
}


@media screen and (max-width: 667px) {
	ul.reco_ban li{
		margin:0 5px 5px;
	}
	#home .tatetala_info{margin:0 5px 5px;}
}	

@media print, screen and (min-width: 668px) {
	ul.reco_ban{
		display: flex;
		flex-wrap:wrap;
		margin: 0 auto 3%
	}
	
	ul.reco_ban li{
	width: calc(( 100% - 30px ) / 2 );
	margin-right: 30px;
	}
	
	ul.reco_ban li:nth-child( 2n ) {margin-right: 0;}


}	

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





/* ------------------------------
 .instagram-feed
------------------------------ */
.instagram-feed{
	width: 90%;
	margin: 0 auto
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	.instagram-feed{}
}	

@media print, screen and (min-width: 1024px) {
	.instagram-feed{width: 80%;}
	.sbi_header_text{margin: 0px auto;
		width: 60% !important;
	}
}	


/* ------------------------------
 #movie_hl
------------------------------ */
#movie_hl{
	padding: 0 0 5%
}

#movie_hl ul{}
#movie_hl ul li{}
#movie_hl ul li h3{
	font-size: 1em;
	padding: .8em;
}


#movie_hl .more{margin: 0 auto 3em;}
	

@media print, screen and (min-width: 668px) {
	#movie_hl ul{
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto
	}


	#movie_hl ul li{
	width: calc( ( 100% - 60px ) / 3 );
	margin-right: 30px;
	margin-bottom: 1.3em
	}
	
	#movie_hl ul li:nth-child( 3n ) {margin-right: 0;}
	#movie_hl ul li h3{}
}	

@media print, screen and (min-width: 1360px) {
	#movie_hl ul{max-width: 1200px;}
}	


/* ------------------------------
 .instagram-feed
------------------------------ */
.instagram-feed{
	width: 90%;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	.instagram-feed{}
}	

@media print, screen and (min-width: 1024px) {
	.instagram-feed{width: 80%;}
	.sbi_header_text{margin: 0px auto;
		width: 60% !important;
	}
}	



/* ------------------------------
 #media_list
------------------------------ */

#media_list{
	padding: 6% 0
}

.media_list_wrap{
	max-width: 980px;
	width: 90%;
	margin: 0 auto;
}


.media_list_wrap dl{
	padding: 1.5em 1em;
	border-bottom: solid 1px #ccc
}


.media_list_wrap dt{
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
	font-weight: bold;
	margin: 0 0 .6em 0
}

.media_list_wrap dt::before{
	content: "–";
	padding-right: .8em
}


.media_list_wrap dd{
	padding: 0 0 0 1em
}