@charset "utf-8";

/* ================ Reset ================= */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var,b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;box-sizing: border-box;font-weight: normal;font-style: normal;}
body {
	height: 100%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-size: 17px;
	color: #000;
	letter-spacing: 0;
}

html{
	overflow-x: hidden;
	overflow-y: scroll;
}
body{
	padding-right: 0!important;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
nav ul, ul, nav ol, ol {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	-webkit-tap-highlight-color:transparent;
	-webkit-tap-highlight-color:rgba( 100, 100, 100, 0.5 );
	text-decoration: none;
	color: #000;
}
a, a:before, a:after{
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
a:hover {
	transform: scale(1.04);
}

button {
	-webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}
img{
	vertical-align: bottom;
	border: 0;
	max-width: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select {
	vertical-align:middle;
}
.cf:before,
.cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}

/* =================== */
.wrapper .pc_l,
.wrapper .pc_r{
	display: none;
}

.view_area{
	background: url("../img/bg_flower.png") top center repeat-y;
	overflow-x: hidden;
	position: relative;
	font-size: 4.8vw;
}

.kv{
	position: relative;
}
.kv .f01{
	width: calc((92/828)*100%);
	position: absolute;
	top: 1%;
	right: 5%;
}
.kv .f02{
	width: calc((43/828)*100%);
	position: absolute;
	top: 77%;
	left: 5%;
}
.kv .f03{
	width: calc((81/828)*100%);
	position: absolute;
	top: 81%;
	left: 11%;
}


.intro{
	padding: 60px 0 0;
	position: relative;
}

.intro .txt{
	font-weight: 500;
	color: #ffff00;
	text-align: center;
	line-height: 1.6;
	margin: 0 0 5%;
}

.intro .img01{
	width: calc((1199/828)*100%);
	left: -33%;
	position: relative;
}
.intro .img01 p{
	position: absolute;
	top: 0;
	left: 0;
}
.intro .img02{
	margin: -10% 0 0 0;
	width: calc((1276/828)*100%);
	left: -19%;
	position: relative;
}
.intro .img02 p{
	position: absolute;
	top: 0;
	left: 0;
}

.intro .f04{
	width: calc((118/828)*100%);
	position: absolute;
	top: 0;
	right: -5%;
}
.intro .f05{
	width: calc((84/828)*100%);
	position: absolute;
	top: 8%;
	left: 5%;
}
.intro .f06{
	width: calc((89/828)*100%);
	position: absolute;
	top: 18%;
	right: 3%;
}
.intro .f07{
	width: calc((239/828)*100%);
	position: absolute;
	top: 51%;
	right: -3%;
}
.intro .f08{
	width: calc((126/828)*100%);
	position: absolute;
	bottom: 0;
	left: 5%;
}
.intro .f09{
	width: calc((94/828)*100%);
	position: absolute;
	bottom: -3%;
	right: 15%;
}


.special{
	background: url("../img/bg_special.png") top center no-repeat;
	background-size: 100% 100%;
	margin:-15% 0 -5% 0 ;
	padding: 30% 10% 20%;
}
.special h3{
	width: calc((252/828)*120%);
	margin: 0 auto 15%
}
.special .txt01{
	width: calc((532/828)*120%);
	margin: 0 auto 5%
}

.special .img_box{
	position: relative;
	padding: 0 0 15%;
	margin: 0 0 10%;
	background: url("../img/line01.png") bottom center no-repeat;
	background-size: calc((609/828)*120%) auto;
}

.special .img_box .img01{
	width: calc((632/828)*120%);
	margin: 0 auto
}
.special .img_box .img02{
	width: calc((263/828)*120%);
	margin: 0 auto;
	position: absolute;
	top:0;
	left: 13%
}
.special .img_box .img03{
	width: calc((292/828)*120%);
	margin: 0 auto;
	position: absolute;
	top:38%;
	left: 40%

}
.special .txt02{
	width: calc((694/828)*120%);
	margin: 0 auto
}
.special .notice{
	padding: 5%;
	font-size: 12px;
}

.special .present{
	background: url("../img/bg_special-star.png") top center no-repeat;
	background-size: calc((619/828)*120%) auto;
	padding: 5% 0;
}
.special .present .txt03{
	width: calc((658/828)*120%);
	margin: 0 auto 10%
}

.special .present .present-a{
	position: relative;
	margin: 0 0 15%;
}
.special .present .present-a p{
	width: calc((658/828)*120%);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.special .present .present-a .img{
	width: calc((246/828)*120%);
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 35%;
	z-index: 0;
}

.special .present .present-b{
	position: relative;
	margin: 0 0 30%;
}
.special .present .present-b p{
	width: calc((658/828)*120%);
	margin: 0 auto;
	position: relative;
	z-index: 1
}
.special .present .present-b .img{
	width: calc((343/828)*120%);
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 25%;
	z-index: 0;
}


.special .present .present-c{
	position: relative;
	margin: 0 0 15%;
}
.special .present .present-c p{
	width: calc((658/828)*120%);
	margin: 0 auto
}
.special .present .present-c .img{
	width: calc((226/828)*120%);
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 35%
}


.about {
	border-top: 20px solid #a78d5a;
	border-bottom: 20px solid #a78d5a;
	background: #fff;
	padding: 10% 0 15%;
	margin: 0 0 35%;
	position: relative;
}
.about h3{
	width: calc((324/828)*100%);
	margin: 0 auto 5%;
}
.about .txt01{
	width: calc((379/828)*100%);
	margin: 0 auto 5%;
}
.about .txt02{
	width: calc((715/828)*100%);
	margin: 0 auto 8%;
}
.about .txt03{
	width: calc((721/828)*100%);
	margin: 0 auto 8%;
}
.about .uma{
	width: calc((269/828)*100%);
	position: absolute;
	right: 0;
	bottom: -28%;
}
.about .f10{
	width: calc((151/828)*100%);
	position: absolute;
	bottom: -27%;
	right: 30%;
}


.foot{
	background: url("../img/bg_foot.png") top center no-repeat;
	background-size: 100% 100%;	
	padding: 20% 0 12%;
	margin: 0 0 20%;
	position: relative;
}

.foot h3{
	width: calc((768/828)*100%);
	margin: 0 auto 5%;
}
.foot p{
	margin: 0 5% 8%;
	color: #fff;
	line-height: 1.8;
}
.foot a{
	display: block;
	width: calc((747/828)*100%);
	margin: 0 auto 8%;
}

.foot .f11{
	width: calc((84/828)*100%);
	position: absolute;
	bottom: -3%;
	left: 15%;
}
.foot .f12{
	width: calc((133/828)*100%);
	position: absolute;
	bottom: -11%;
	left: 65%;
}

.footer{
	background: #fff;
	padding: 1% 0 0 0;
}

.footer hr{
	display: none;
}
.footer img {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform;
}
.footer-share {
	width: 91.0628019324%;
	margin: 16.9082125604% auto
}
.footer-share--head {
	width: 46.9806763285%;
	margin: 0 auto 5.0724637681%
}
.footer-share-links {
	display: flex;
	justify-content: center
}
.footer-share--link {
	width: 15.0966183575%;
	margin: 0 4.4685990338%
}
@media (any-hover: hover) {
	.footer-share--link a img {
		transition: -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99), -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99)
	}
	.footer-share--link a:hover img {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}

.footer-content {
	display: flex;
	flex-wrap: wrap;
	width: 91.0628019324%;
	margin: 0 auto
}
.footer-info {
	width: 91.0628019324%
}
.footer-info--head {
	width: 22.5845410628%;
	margin: 0 0 3.6231884058% 0
}
.footer-info-data {
	display: flex;
	font-size: 3.4vw;
	line-height: 1.25;
	margin: 0 0 1em 0
}
.footer-info-data span:nth-child(1) {
	width: 4.5em
}
.footer-sns {
	width: 91.0628019324%;
	margin: 0 auto
}
.footer-sns--head {
	width: 22.3429951691%;
	margin: 18.115942029% auto 4.347826087%
}
.footer-sns-links {
	display: flex;
	justify-content: center
}
.footer-sns--link {
	width: 14.7342995169%;
	margin: 0 2.4154589372%
}
@media (any-hover: hover) {
	.footer-sns--link a img {
		transition: -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99);
		transition: transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99), -webkit-transform 0.25s cubic-bezier(0.13, 0.71, 0.58, 0.99)
	}
	.footer-sns--link a:hover img {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}
.footer-btns {
	display: flex;
	justify-content: space-between;
	width: 91.0628019324%;
	margin: 12.077294686% auto 15.9420289855%
}
.footer--btn {
	width: 42.8743961353%
}
.footer--bnr {
	width: 91.3043478261%;
	margin: 0 auto 10.8695652174%
}
.footer--txt {
	width: 100%;
	font-size: 3vw;
	line-height: 1.39;
	text-align: center;
	margin: 0 0 5.5555555556% 0
}
.footer--copyright {
	width: 100%;
	line-height: 1;
	text-align: center;
	font-size: 3vw;
	margin: 0 0 3.8647342995%
}
.footer--logo {
	background: #000;
	padding: 2.1739130435% 0 1.690821256%
}
.footer--logo>img {
	width: 23.4299516908%;
	margin: 0 auto
}
.pc_img{
	display: none;
}


/* ======================================== */
@media print, screen and (min-width: 829px){
/* =======1199px～829PC======== */
.pc{display: inline-block;}
.sp{display: none;}

.wrapper{
	position: relative;
/*  display: grid;
  grid-template-columns: 1fr 510px 33%;
  align-items: flex-start;
  z-index: 1;
*/
	background:url("../img/bg_pc.png") top center no-repeat fixed;
	background-size: cover;
}

.view_area{
	position: relative;
	width: 510px;
	z-index: 2;
	margin: 0;
	font-size: 20px;
}

.pc_wrap{
	position: relative;
	width: 510px;
	z-index: 2;
	margin: 0 0 0 20%;
}
.pc_wrap:before{
	content: "";
	display: block;
	height: 100%;
	width: 31px;
	background: url("../img/bg_view-l.png") top center repeat-y;
	background-size: 31px auto;
	position: absolute;
	top: 0;
	left: -31px
}

.pc_wrap:after{
	content: "";
	display: block;
	height: 100%;
	width: 31px;
	background: url("../img/bg_view-r.png") top center repeat-y;
	background-size: 31px auto;
	position: absolute;
	top: 0;
	right: -31px
}

.wrapper .pc_l{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 400px;
	height: 100%;
	position: fixed;
	margin: 0 0 0 520px;
	top: 0;
	left:30%;
	z-index: 2;
}
.wrapper .pc_l .logo{
	width: 100px;
	margin: 0 auto 33px;
}
.wrapper .pc_l .th{
	width: 100%;
	position: relative;
}
.wrapper .pc_l .th .th01{
	width: 57px;
	position: absolute;
	top: 0;
	left: -10px
}
.wrapper .pc_l .th .th02{
	width: 42px;
	position: absolute;
	top: -70px;
	left: 50px
}
.wrapper .pc_l .th .th03{
	width: 47px;
	position: absolute;
	top: -50px;
	right: 20px
}

.wrapper .pc_l h1{
	text-align: center;
	width: 100%;
	margin: 0 0 55px;
}
.wrapper .pc_l nav{
	width: 100%;
	text-align: center;	
}
.wrapper .pc_l nav li{
	margin: 0 0 10px;
}
.kv{
	padding: 0 0 1%;
}
.kv nav{
	display: none;
}
.special h5{
	font-size: 24px;
	line-height: 1;
}
.special h5 span{
	width: 24px;
}
.info .inner dt{
	font-size: 24px;
}
.info .inner dd{
	font-size: 24px;
}
.info .inner .txt{
	font-size: 24px;
}

.footer-info-data{
	font-size: 15px;
}
.footer--txt{
	font-size: 15px;
}
.footer--copyright{
	font-size: 14px;
}

}


@media print, screen and (min-width: 1199px){
/* =======1200px～PC======== */
.pc{display: inline-block;}
.sp{display: none;}



/* ======PC=======*/}