@charset "utf-8";

/* ========================================================================================================================/
	
	Document : style.css

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


/* ------------------------------------------------------------------------------------------------------------------------/
	top
/------------------------------------------------------------------------------------------------------------------------ */
#loading {
	width: 100vw;
	height: 100vh;
	transition: all 0.8s;
	background-color: #efefef;;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
}
.loaded {
	opacity: 0;
	visibility: hidden;
}

/* ローディングアニメーション */
.spinner {
	width: 40px;
	height: 40px;
	background-color: #232323;
	margin: 25% auto;
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
	0% { 
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
	} 50% { 
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
	} 100% { 
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}


#mv {
	width:100%;
	padding-top: 56.25%;
	position:relative;
	}
#mv:before {
	content:"";
	display:block;
	}
#back-movie {
	position:absolute;
	top:0;
	left:0;
	right:0;
	width: 100%;
	height: 100%;
	}
.title-wrap {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-color: rgba(3,71,58,0.2);
}
.catchcopy {
	opacity: 0;
	position:absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	animation: catchfadeIn 0.5s 3s forwards,catchfadeOut 0.5s 29s forwards;
	}
@keyframes catchfadeIn { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}
@keyframes catchfadeOut { /*animetion-nameで設定した値を書く*/
  0% {opacity: 1} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 0} /*アニメーション終了時は不透明度100%*/
}
.catchcopy .catch_bg {
	padding: 30px;
	position: relative;
}
.catchcopy .catch_bg:before, 
.catchcopy .catch_bg::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}
.catchcopy .catch_bg::before {
	border-left: solid 1px #fff;
	border-top: solid 1px #fff;
	top: 0;
	left: 0;
}
.catchcopy .catch_bg::after {
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	bottom: 0;
	right: 0;
}

.catchcopy .catch {
	width: 450px;
	height: auto;
}

@media screen and (max-width:1280px) {
	.catchcopy {
		font-size:32px;
		}
}

.contents {
	font-family:"Noto Serif Japanese","YuMincho","游明朝","游明朝体",YuMincho,Yu Mincho,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1rem;
	line-height: 1.8;
}

.wrap {
	width: 1000px;
	margin: 0 auto;
}

/* メッセージ */
#message {
	margin: 0 auto 80px;
	font-weight: bold;
	line-height: 1.8;
	padding: 80px 0;
	background-color: #F2F0F9;
}
#message p {
	margin-bottom: 1em;
}

#message .chach {
	font-size: 1.25rem;
}
#message .chach img {
	display: block;
	width: 510px;
	margin:0 auto 60px;
}
#message .chach .sanctuary {
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	margin-bottom: 0;
}

#message .wrap {
	position: relative;
	/* min-height: 720px; */
	min-height: 400px;
	margin-top: 80px;
}
#message .img {
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
#message .img img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	margin-bottom: 0;
}
#message .desc {
	position: absolute;
	/* top: 50px; */
	top: 20px;
	left: 0;
	z-index: 1;
	width: calc(100% - 50px);
	padding: 50px;
	background-color: #fff;
	box-sizing: border-box;
	text-align: left;
	line-height: 1.8;
	box-shadow:0px 0px 20px -5px #ddd;
}
#message .desc .box01 {
	width: 48%;
	margin: 0 0 1em;
}
#message .desc .box02 {
	margin: 0 0 1em;
}
#message .desc ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
#message .desc ul li {
	padding-left: 1em;
    text-indent: -1em;
}
#message .desc ul li::before {
	content: "・";
}

/* 動画紹介 */
#movie {
	margin: 80px auto;
}
#movie .outer {
	overflow: hidden;
}
#movie .outer .moviecell {
	float: left;
	width: calc(50% - 10px);
}
#movie .outer .moviecell:nth-child(even) {
	float: right;
}
#movie .outer .iframe-responsive {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
}
#movie .outer .iframe-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ラインナップ */
#lineup {
	margin: 80px auto;
}
#lineup h2 {
	margin-bottom: 16px;
}
#lineup .notice {
	text-align: right;
	color: #C00A1B;
	margin-bottom: 40px;
}
#lineup .outer {
	display: flex;
	justify-content:space-between;
}
#lineup .cell {
	width: calc(50% - 10px);
	text-align: left;
	padding: 20px;
	margin-bottom: 30px;
	background-color: #fafafa;
	box-sizing: border-box;
	overflow: hidden;
}
/*
#lineup .cell .photo {
	float: left;
	width: 220px;
	height: 184px;
	margin-right: 24px;
}
#lineup .cell .photo img {	
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#lineup .cell .box {
	float: right;
	width: calc(100% - 248px);
}
*/

#lineup .cell .photo {
	width: 450px;
	height: 376px;
}
#lineup .cell .photo img {	
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#lineup .cell .box {
	width: 100%;
	margin-top: 24px;
}

#lineup .cell b {
	display: inline-block;
	font-size: 1.25rem;
	color: #70a200;
}
#lineup .cell .chach {
	margin-top: 0;
}
#lineup .cell dl {
	overflow: hidden;
}
#lineup .cell dl dt {
	width: 4em;
	float: left;
}
#lineup .cell dl dt::after {
	content: "：";
}
#lineup .cell dl dd {
	float: left;
	width: calc(100% - 4em);
	margin: 0;
}

#lineup .cell .button {
	text-align: center;
	display: inline-block;
	width: 100%;
	margin-top: 6px;
	padding: 4px 0;
	color: #fff;
	background-color: #222;
	text-decoration: none;
	border: 1px solid #222;
	position: relative;
	z-index: 1;
}
#lineup .cell .button:hover {
	color: #222;
}
#lineup .cell .button::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: "";
	background: #fff;
	-webkit-transform-origin: right top;
			transform-origin: right top;
	-webkit-transform: scale(0, 1);
			transform: scale(0, 1);
	-webkit-transition: -webkit-transform 400ms;
	transition: -webkit-transform 400ms;
	transition: transform 400ms;
	transition: transform 400ms, -webkit-transform 400ms;
}
#lineup .cell .button:hover::before {
	-webkit-transform-origin: left top;
			transform-origin: left top;
	-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
}

#lineup .solar a {
	transition:0.3s;
}
#lineup .solar a:hover {
	opacity: 0.7;
}
#lineup .solar img {
	width: 100%;
	height: auto;
}


/* 性能ダイジェスト */
#performance {
	margin: 80px auto;
	text-align: left;
}

#performance .pfm04 {
	width: 100%;
	margin-top: 24px;
	margin-bottom: 120px;
}
#performance .pfm04 .img01 {
	margin-bottom: 80px;
}
#performance .pfm04 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#performance .pfm01 {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	align-items :center;
	padding-bottom: 80px;
	border-bottom: 1px solid #ddd;
}
#performance .pfm01 .img {
	width: calc(33.3%);
	max-width: 270px;
	display: inline-block;
}

#performance .pfm02 {
	width: 100%;
	margin-top: 80px;
	padding-bottom: 80px;
	border-bottom: 1px solid #ddd;
}
#performance .pfm02 .img01 {
	margin-bottom: 80px;
	padding-bottom: 80px;
	border-bottom: 1px solid #ddd;
}

#performance .pfm03 {
	width: 100%;
	margin-top: 80px;
	display: flex;
	justify-content: space-between;
	align-items :center;
}
#performance .pfm03 h3 {
	margin-bottom: 40px;
}
#performance .pfm03 .img {
	display: block;
	width: 50%;
	max-width: 453px;
}
#performance .pfm03 .desc {
	width: 50%;
}

#performance .pfm05 {
	width: 100%;
	margin-top: 80px;
	padding-bottom: 40px;
}
#performance .pfm05 .img01 {
	width: 100%;
	height: auto;
}


/* メリット */
#merit {
	margin: 80px auto;
	text-align: left;
}

#merit .comparison {
	margin-bottom: 40px;
}
#merit .comparison strong {
	font-size: 1.25em;
	border-bottom: 1px solid #272727;
}
#merit .comparison ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
#merit .comparison ul li {
	padding-left: 1em;
    text-indent: -1em;
}
#merit .comparison ul li::before {
	content: "・"
}
#merit .comparison .left {
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 24px;
	background-color: #F2F0F9;
}
#merit .comparison .right {
	width: 50%;
	float: right;
	box-sizing: border-box;
	padding: 24px;
	background-color: #FFDABB;
}

#merit .img {
	width: 47%;
	float: right;
	margin-left: 40px;
	margin-bottom: 30px;
}
#merit .img img {
	width: 100%;
	height: auto;
}
#merit .desc p {
	margin-bottom: 1em;
}
#merit .desc p:last-of-type {
	margin-bottom: 0;
}


/* おいらせ町について */
#town {
	margin: 80px auto;
	text-align: left;
}
#town p {
	margin-bottom: 1em;
}
#town p:last-of-type {
	margin-bottom: 0;
}

#town strong {
	display: block;
	font-size: 1.25rem;
	margin-top: 1.25em;
}
#town strong::before {
	display: inline-block;
	content: '';
	width: 15px;
	height: 15px;
	border: 2px solid #DB7C34;
	margin-right: 0.5em;
	box-sizing: border-box;
	border-radius: 100%;
}
#town a.jaran {
	font-size: 1.125rem;
	color: #EC6D0D;
	text-decoration: none;
	transition: 0.3s;
}
#town a.jaran:hover {
	color: #F0AF7E;
	text-decoration: underline;
}

#town h3 {
	margin-top: 1.5em;
}

#town .map {
	width: calc(50% - 20px);
	float: left;
}
#town .map iframe {
	width: 100%;
	height: 400px;
}
#town .desc {
	width: calc(50% - 20px);
	float: right;
}


.banner {
	transition: 0.3s all;
}
.banner:hover {
	opacity: 0.8;
}