@charset "utf-8";


#index1{background: #f5f2ed; text-align:center;}


#index1 h2{ font-size:32px; margin-bottom:45px; color:#333; font-weight:bold;}
#index1 h2 span{color:#ababab; margin-bottom:40px; font-size:20px;}
@media only screen and (max-width:991px)	{#index1 h2{font-size:20px; text-align:center; margin:0 0 45px 0;}}

.fb-page{ margin-left:auto; margin-right:auto; text-align:center;}
#appeal{}
.appeal-tb,.appeal-top,.appeal-bottom{display: table;width: 100%;table-layout: fixed;}
	@media (max-width:991px)	{.appeal-tb,.appeal-top,.appeal-bottom{display: block;}}

.appeal-left,.appeal-right{display: table-cell;width: 50%;vertical-align: middle;overflow: hidden;}
	@media (max-width:991px)	{.appeal-left,.appeal-right{display: block;width: 100%;}}


.appeal1,.appeal2,.appeal3,.appeal4,
.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus
{text-align: center;padding:30px 15px;}

.appeal4,.appeal4:hover,.appeal4:active,.appeal4:focus{padding-left: 50%;display: table-cell;vertical-align: middle;}


.appeal1,.appeal2,.appeal3,.appeal4{position: relative;}

.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{opacity:.75;overflow: hidden;}


.appeal1 *,.appeal2 *,.appeal3 *,.appeal4 *{position: relative;z-index: 1;}


.appeal1 h2,.appeal2 h2,.appeal3 h2,.appeal4 h2{font-size: 16px;line-height: 1;margin-bottom: 15px;font-weight: bold;}

.appeal1,.appeal2,.appeal3,.appeal4,
.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,
.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{color:#fff;text-shadow: 0 0 3px #000;}

.appeal2,.appeal3,.appeal4,
.appeal2:hover,.appeal3:hover,.appeal4:hover,
.appeal2:active,.appeal3:active,.appeal4:active,
.appeal2:focus,.appeal3:focus,.appeal4:focus{height: 300px;}

.appeal1:before,.appeal2:before,.appeal3:before,.appeal4:before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-position: center center;background-size:cover;background-repeat: no-repeat;transform-origin:50% 50%;transform:scale(1.0);transition:.5s;}

.appeal1:before,.appeal1:hover:before,.appeal1:active:before,.appeal1:focus:before{background-image: url(../images/top/appeal1.jpg);height: 600px;}
.appeal2:before,.appeal2:hover:before,.appeal2:active:before,.appeal2:focus:before{background-image: url(../images/top/appeal2.jpg);}
.appeal3:before,.appeal3:hover:before,.appeal3:active:before,.appeal3:focus:before{background-image: url(../images/top/appeal3.jpg);}
.appeal4:before,.appeal4:hover:before,.appeal4:active:before,.appeal4:focus:before{background-image: url(../images/top/appeal4.jpg);}

	@media (max-width:991px)	{.appeal1,.appeal2,.appeal3,.appeal4,.appeal1:hover,.appeal2:hover,.appeal3:hover,.appeal4:hover,.appeal1:active,.appeal2:active,.appeal3:active,.appeal4:active,.appeal1:focus,.appeal2:focus,.appeal3:focus,.appeal4:focus{height: auto;}}

	@media (max-width:991px)	{.appeal4,.appeal4:hover,.appeal4:active,.appeal4:focus{display: block;padding-left: 15px;}}

.appeal1:hover:before,.appeal1:active:before,.appeal1:focus:before,
.appeal2:hover:before,.appeal2:active:before,.appeal2:focus:before,
.appeal3:hover:before,.appeal3:active:before,.appeal3:focus:before,
.appeal4:hover:before,.appeal4:active:before,.appeal4:focus:before{transform-origin:50% 50%;transform:scale(1.1);transition:.5s;}


/*square-img*/
/*#square-img{}


#square-img h2{ font-size:32px; margin-bottom:45px; color:#333; font-weight:bold; text-align: center;}
#square-img h2 span{color:#ababab; margin-bottom:40px; font-size:20px;}
@media only screen and (max-width:991px)	{#square-img h2{font-size:20px; text-align:center; margin:0 0 45px 0;}}*/




.square-content{ display: block; height: 0; width: 100%; padding-bottom: 55%; position:relative; overflow:hidden; margin-bottom:20px;}
.square-content h3{font-size:40px; text-align:center;color:#fff;line-height: 30px;padding:10px;position:absolute;top:0;bottom:0;}
	@media only screen and (max-width:991px)	{.square-content h3{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 10px; font-weight: 100;}}
.square-content h3 span{ font-size:18px; display:block; padding-top:15px;}
	@media only screen and (max-width:991px)	{.square-content h3 span{font-size: 17px; line-height: 1.75;}}

.bg_about01{
	background: no-repeat center center;
	background-size: auto 100%;
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-ms-transition:0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
	overflow:hidden;
}
.square-content > div { position: absolute; top: 37%;}
.square-content-inner { display: flex; justify-content: center; align-items: center; width: 100%;}
.square-content:hover { background-size: auto 110%; transition: all 0.5s ease-in;}


#bg-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat #fff;color:#fff;}
	@media only screen and (max-width:991px)	{#bg-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat;}}

#bg-img-contents h2{color:#fff;text-align: left;font-size: 60px;font-weight: bold;margin-bottom: 30px;}
	@media only screen and (max-width:991px)	{#bg-img-contents h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}}

#bg-img-contents .lead{font-size: 30px;line-height: 36px;margin: 30px 0;}
	@media only screen and (max-width:991px)	{#bg-img-contents .lead{font-size: 21px;line-height: 27px;margin: 15px 0;}}

#bg-img-about{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat #fff;color:#fff;}
	@media only screen and (max-width:991px)	{#bg-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat;}}

#bg-img-about h2{color:#fff;text-align: center;font-size: 40px;margin-bottom: 50px; font-family:'nserif',serif; font-weight: bold; line-height: 1.0;}
	@media only screen and (max-width:991px)	{#bg-img-about h2{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 1.5; font-weight: bold;}}

/*ABOUT US*/
#bg-img-about h2 span{font-size: 20px; line-height: 2.25;}
	@media only screen and (max-width:991px)	{#bg-img-about h2 span{font-size: 17px; font-weight: bold; margin-bottom: 30px; line-height: 1.75; font-weight: 100;}}

#bg-img-about .lead{font-size: 20px;line-height: 36px;margin: 30px 0;}
	@media only screen and (max-width:991px)	{#bg-img-contents .lead{font-size: 21px;line-height: 27px;margin: 15px 0;}}

#bg-img-about h3{ color: #fff; font-size: 20px; text-align: center; line-height: 1.75; margin-bottom: 30px;}


/*その他見出し*/
h2.top-h2{color:#5995ed;text-align: center;font-size: 50px;margin-bottom: 50px; font-family:'swis721','nsans'; font-weight: bold; line-height: 1.0;}
	@media only screen and (max-width:991px)	{h2.top-h2{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 1.5; font-weight: bold;}}

h2.top-h2 span{font-size: 20px;  line-height: 2.25;}
	@media only screen and (max-width:991px)	{h2.top-h2 span{font-size: 17px; font-weight: bold; margin-bottom: 30px; line-height: 1.75; font-weight: 100;}}

h3{color:#333;text-align: center;font-size: 28px;margin-bottom: 50px; font-family:'swis721','nsans'; font-weight: bold; line-height: 1.35;}
	@media only screen and (max-width:991px)	{h3{font-size: 25px;}}

h3 span{font-size: 14px; line-height: 2.25;}

a.cate-tit{font-size: 14px; color: #333; font-weight: bold; line-height: 2.25;}



.check{list-style: none;}
.check li{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

.check li:before{content: "";background: url(../images/common/checkmark.png) left center /30px no-repeat;width: 30px;height: 48px;display: block;position: absolute;top: 0;left: 0;right: 0;}
	@media (max-width:991px)	{.check li:before{width: 30px;height: 24px;background-size:20px;}}


#layer{ padding-top:125px;}
@media only screen and (max-width:991px) {#layer{}}

#layer .top_img{position: relative; top: 0; left: 0; width: 60%;}
#layer .top_img span { display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}

@media only screen and (max-width:991px) {#layer .top_img{width: 100%;}
#layer .top_img span{ display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}
#layer .col-12{ padding-top:40%;}}

#layer h2{text-align: center;font-size: 32px;font-weight: bold; position:relative;color:#333;margin-bottom: 75px;}
@media only screen and (max-width:991px)	{#layer h2{font-size: 32px;margin-bottom: 30px;}}

#layer h2 span{ font-size:20px; color:#333; display:block; padding-top:15px; font-weight:bold;}

@media only screen and (max-width:991px)	{#layer h2 span{ display:block;}}


#layer h3{text-align:left;font-size: 24px;margin-bottom: 35px;font-weight: bold; position:relative; line-height:1.7}
@media only screen and (max-width:991px)	{#layer h3{font-size: 18px;margin-bottom: 30px;}}

#layer .inner{ background-color: rgba(239,239,239,0.95); padding:80px 80px; color:#333;}
@media only screen and (max-width:991px)	{#layer .inner{padding:25px 20px;display: block;width: 90%; margin-left:auto; margin-right:auto;}}


#news{margin-bottom: 200px;}
@media only screen and (max-width:991px)	{#news{margin-bottom: 120px;}}
/*#news h2{color:#000; font-weight:bold; text-align:center; margin-bottom:75px;}*/

.news-box{}

.news-article{display: table;width: 100%;align-items:center;}
	@media only screen and (max-width:991px)	{.news-article{display: block;}}

.news-article + .news-article{margin-top: 15px;}

.news-date,.news-comment{display: table-cell;vertical-align: top;}
	@media only screen and (max-width:575px)	{.news-date,.news-comment{display: block;}}

.news-date{width: 110px;text-align: center;padding: 9px 0;}
	@media only screen and (max-width:991px)	{.news-date{width: auto;text-align: left;}}

.news-date.shp{border-bottom: 1px solid #5995ed;}
.news-date.tpc{border-bottom: 1px solid #00c1ff;}

.news-comment{border-bottom: 1px solid #999;padding: 9px 15px;}
	@media only screen and (max-width:991px)	{.news-comment{}}


#half1 h3,#half1 p,#half2 h3,#half2 p,#half3 h3,#half3 p{color: #fff;}

/*half1
---------------------------*/
#half1{background: url(../images/top/half01.jpg) right top no-repeat #fff; background-size:58%; margin-bottom:1px; margin-bottom: 120px;}

#half1.top-h2{color:#5995ed;text-align: center;font-size: 40px;margin-bottom: 50px; font-family:'swis721','nsans'; font-weight: bold; line-height: 1.0;}
	@media only screen and (max-width:991px)	{h2.top-h2{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 1.5; font-weight: bold;}}

#half1 h2.top-h2 span{font-size: 20px;  line-height: 2.25;}
	@media only screen and (max-width:991px)	{h2.top-h2 span{font-size: 17px; font-weight: bold; margin-bottom: 30px; line-height: 1.75; font-weight: 100;}}

#half1 .inner,#half2 .inner,#half3 .inner{ background:#5995ed; padding:120px 100px;}

/*half2
---------------------------*/
#half2{background: url(../images/top/half02.jpg) left center no-repeat #fff; background-size:58%; margin-bottom:1px; margin-bottom: 120px;}
@media only screen and (max-width:991px)	{#half1,#half2,#half3{margin-bottom: 0;}}

#half2 h2.top-h2{color:#5995ed;text-align: center;font-size: 70px;margin-bottom: 50px; font-family:'swis721','nsans'; font-weight: bold; line-height: 1.0; position: absolute; top: -130px; left: 0;}
	@media only screen and (max-width:991px)	{#half2 h2.top-h2{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 1.5; font-weight: bold; position: relative; text-align: center;}}

#half2 h2 span{ font-size:20px; padding-bottom:20px;}
	@media (max-width:991px)	{#half1,#half2,#half3{ background:none !important;}#half1 .inner,#half2 .inner,#half3 .inner{ background:#5995ed; padding:55px 20px 55px 20px;}}


/*half3
---------------------------*/
#half3{background: url(../images/top/half03.jpg) left center no-repeat #fff; background-size:58%; margin-bottom:1px; margin-bottom: 120px;}
@media (max-width:991px)	{#half3{ margin-bottom: 20px;}}

#half3.top-h2{color:#5995ed;text-align: center;font-size: 40px;margin-bottom: 50px; font-family:'swis721','nsans'; font-weight: bold; line-height: 1.0;}
	@media only screen and (max-width:991px)	{h2.top-h2{font-size: 34px;font-weight: bold;margin-bottom: 15px; line-height: 1.5; font-weight: bold;}}

#half3 h2.top-h2 span{font-size: 20px;  line-height: 2.25;}
	@media only screen and (max-width:991px)	{h2.top-h2 span{font-size: 17px; font-weight: bold; margin-bottom: 30px; line-height: 1.75; font-weight: 100;}}


/*business-box
---------------------------*/
.business-box{ transition: .6s;overflow: hidden;}
.business-box a{ display: block; position: relative; transition: .6s;}

.business-box dl{position: absolute; padding: 30px 40px 20px; top: 77%; left: 0; background-color: rgba(0,0,0,.6); width: 100%; margin-bottom: 0; color: #fff; height: 114px; height:auto; transition: .6s;}
	@media only screen and (max-width:991px)	{.business-box dl{ padding: 11px 15px 20px;}}

.business-box dd{ transition: .6s;}
.business-box dl dd { margin-top: 30px; transition: .6s; opacity:0;}
.business-box dt {transition: .6s;}

.business-box .ja{ font-size:20px;}
	@media only screen and (max-width:991px)	{.business-box .ja{ font-size:16px;}}

.business-box:hover dd{ display: block; transition: .6s;opacity:1;}
.business-box:hover dl{ top:0; transition: .6s; height:100%;}

.business-btn{margin-top: 50px;
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	color: #fff;
	border: 3px solid #fff;
	text-align: center;
	position: relative;
}

#index3{ position:relative;}
#index3:before { content: '';position: absolute; top: 0px; right: 0; width: 68%; height: 100%; background: url(../images/top/bg_index3.jpg) center no-repeat; background-size: contain; z-index: -2;}
@media only screen and (max-width:991px)	{#index3:before{ display:none;}}
#index3 h2{color:#333; font-weight:bold; font-size:42px; line-height:1.7;}
#index3 h2 span{color:#333; font-weight:bold; font-size:18px; display:block;}
#index3 h3{border-bottom: 1px solid #ddd;text-align: left;padding-bottom: 19px;font-size: 24px;margin-bottom: 30px;}
	@media only screen and (max-width:991px)	{#index3 h2{ font-size:24px;margin-bottom: 30px;}#index3 h3{font-size: 21px;margin-bottom: 15px;padding-bottom: 9px;}}

#index3 h3 small{display: block;font-size: 12px;margin-bottom: 10px;}
	@media only screen and (max-width:991px)	{#index3 h3 small{font-size: 10px;margin-bottom: 5px;}}




#index3 .balloon{width: 50px;height: 48px;text-align: center;font-size: 12px;line-height: 14px;padding: 7px 5px 10px;position: absolute;left: 180px;bottom: 10px;display: block;}
	@media only screen and (max-width:991px)	{#index3 .balloon{left: 150px;bottom: 5px;}}


/*Instagram API
---------------------------*/
.insta_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
	padding: 0;
}

.insta_list li {
    position: relative;
    width: calc((100% - 1.5em)/4);
	list-style: none;
}

@media screen and (max-width: 768px) {
  .insta_list li {
	width: calc((100% - 1.5em)/4);
  }
}

@media screen and (max-width: 575.9px) {
  .insta_list {
  	gap: 0.5em;
  }
  
  .insta_list li {
	width: calc((100% - 1em)/3);
  }
}

.insta_list li::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

.insta_list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insta_btn {
    background-color: #000;
    padding: .5em 1em;
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    transition: .3s
}

.insta_btn a {
    color: #fff;
    text-decoration: none;
}

.insta_btn:hover {
    background-color: #999;
}