@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*ベース文字色*/
/*背景色*/
/*アクセント色*/
/*線*/
/*線*/
/*線*/
/*線*/
/*線*/
/*font*/
/*layout*/
/*==================================== main_visual
====================================*/
#main_visual { height: 100vh; /*h2 { color: #FFF; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; font-size: 38px; line-height: 1.4; text-align: center; padding-left: 20px; padding-right: 20px; width: 100%;
}*/ }
@media screen and (max-width: 768px) { #main_visual { height: 50vh; } }
@media screen and (max-width: 414px) { #main_visual { height: 50vh; } }
#main_visual #main_slider { width: 100%; height: 100%; position: absolute; z-index: 0; top: 0; left: 0; }
#main_visual #main_slider .slider, #main_visual #main_slider .slick-list, #main_visual #main_slider .slick-track, #main_visual #main_slider .slick-slide { width: 100%; height: 100%; }
#main_visual #main_slider img { width: 100%; height: 100%; object-fit: cover; object-position: center center; font-family: "object-fit: cover;object-position: center center;"; }
#main_visual .text { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; padding-left: 20px; padding-right: 20px; width: 100%; }
@media screen and (max-height: 768px) and (min-width: 1025px) { #main_visual .text { margin-top: -20px; } }
#main_visual .text h2 { color: #FFF; font-size: 38px; line-height: 1.4; text-align: center; }
@media screen and (max-height: 768px) and (min-width: 1025px) { #main_visual .text .bnr { margin-top: 20px !important; } }

@media screen and (min-width: 1025px) { #main_visual .search_set { bottom: 50px; } }
@media screen and (max-width: 768px) { #main_visual .text h2 { font-size: 24px; } }
@media screen and (max-width: 414px) { #main_visual .text h2 { font-size: 18px; } }
/*==================================== emg_notice
====================================*/
#emg_notice { background-color: #FFEEEE; border-top: 3px solid #FFAEAE; border-bottom: 3px solid #FFAEAE; }
#emg_notice section { border-bottom: 1px solid #bebebe; }
#emg_notice section:last-child { border-bottom: none; }
#emg_notice section .title { font-size: 16px; text-align: center; padding: 10px 20px; position: relative; }
#emg_notice section .title:after { content: ''; display: block; position: absolute; right: 20px; top: 50%; margin-top: -6px; width: 10px; height: 10px; border-top: 1px solid #766d5e; border-right: 1px solid #766d5e; transform: rotate(135deg); transition: all 0.5s; }
#emg_notice section .title.active:after { transform: rotate(-45deg); }
#emg_notice section .hidden { padding-bottom: 10px; display: none; }
#emg_notice section .hidden p + p { margin-top: 10px; }
#emg_notice section .hidden a { text-decoration: underline; color: #766d5e; }
#emg_notice section .hidden a:hover { text-decoration: none; }

/* ========================================
	gotoキャンペーン
======================================== */
.goto { width: 100%; max-width: 1200px; margin: 0 auto 100px; }
.goto ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; }
.goto ul li { flex-basis: 48.75%; max-width: 585px; }
.goto ul li p { font-size: 15px; margin-top: 20px; }

@media screen and (max-width: 1024px) { .goto { margin-bottom: 0; }
  .goto ul { display: block; }
  .goto ul li { margin-left: auto; margin-right: auto; }
  .goto ul li:first-child { margin-bottom: 30px; }
  .goto ul li p { margin-top: 10px; } }
/*==================================== banner_fixed
====================================*/
#banner_fixed { position: fixed; bottom: 250px; right: 30px; z-index: 100; }

/*==================================== bnr
====================================*/
.bnr { text-align: center; margin-top: 20px; margin-bottom: 50px; max-width: 500px; }
.bnr.all-device { max-width: 100%; margin-top: 0; margin-bottom: 0; }
@media screen and (min-width: 1025px) { .bnr.all-device { margin-bottom: 100px; } }
.bnr > div a { font-size: 0; }
.bnr > div + div { margin-top: 20px; }

/*==================================== invitation
====================================*/
#invitation { background: url("../images/index/lead_bg_circle.jpg") no-repeat right top; padding-top: 100px; /*	.button{
		margin-top: 100px;
		@media screen and (max-width: 768px) {
			margin-top: 40px;
		}
		@media screen and (max-width: 414px) {
			margin-top: 20px;
		}
	}*/ }
@media screen and (max-width: 1024px) { #invitation { padding-top: 60px; background-size: 40%; } }
#invitation h3 { margin-bottom: 20px; color: #766d5e; font-size: 35px; line-height: 1.428571; text-align: center; }
@media screen and (min-width: 2001px) { #invitation h3 { font-size: 35px; } }
@media screen and (min-width: 1280px) and (max-width: 2000px) { #invitation h3 { font-size: 1.75vw; } }
@media screen and (max-width: 1279px) { #invitation h3 { font-size: 22px; } }
#invitation h3 span { text-align: left; }
#invitation .video-wrap { position: relative; margin-bottom: 30px; max-width: 750px; margin-left: auto; margin-right: auto; }
#invitation .video-wrap:before { content: ''; display: block; padding-top: 56.25%; }
#invitation .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#invitation p { text-align: center; max-width: 750px; margin-left: auto; margin-right: auto; }

#youtube { /*background: url("../images/index/lead_bg_circle.jpg") no-repeat right top;
padding-top: 100px;*/   /*h3 { margin-bottom: 20px;
	@include large-fz;
	  text-align: center;
 span { text-align: left; } }*/ /*	.button{
		margin-top: 100px;
		@media screen and (max-width: 768px) {
			margin-top: 40px;
		}
		@media screen and (max-width: 414px) {
			margin-top: 20px;
		}
	}*/ }
@media screen and (max-width: 1024px) { #youtube { padding-top: 60px; background-size: 40%; } }
#youtube .video-wrap { position: relative; margin-bottom: 30px; max-width: 750px; margin-left: auto; margin-right: auto; }
#youtube .video-wrap:before { content: ''; display: block; padding-top: 56.25%; }
#youtube .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#youtube p { text-align: center; max-width: 750px; margin-left: auto; margin-right: auto; }

/*==================================== usp
====================================*/
.usp { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; }
@media screen and (min-width: 769px) { .usp { margin-top: 130px; } }
@media screen and (max-width: 768px) { .usp { flex-direction: column; margin-top: 60px; } }
.usp:first-of-type { margin-top: 0; }
.usp > div, .usp > header { flex-grow: 0; flex-shrink: 0; }
.usp header .kanji { line-height: 1.0; background: url("../images/index/bg_usp.jpg") no-repeat center center/cover; color: #FFF; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; }
@media screen and (min-width: 769px) { .usp header .kanji { width: 140px; height: 140px; font-size: 80px; margin-left: auto; margin-right: auto; } }
@media screen and (min-width: 1025px) and (max-width: 2000px) { .usp header .kanji { width: 7vw; height: 7vw; font-size: 4vw; } }
@media screen and (max-width: 1024px) { .usp header .kanji { width: 80px; height: 80px; font-size: 40px; } }
.usp header .kanji .eng { display: block; font-size: 16px; }
.usp header h4 { font-size: 35px; color: #766d5e; }
@media screen and (min-width: 2001px) { .usp header h4 { font-size: 35px; } }
@media screen and (min-width: 1280px) and (max-width: 2000px) { .usp header h4 { font-size: 1.75vw; } }
@media screen and (max-width: 1279px) { .usp header h4 { font-size: 22px; } }
@media screen and (max-width: 414px) { .usp header h4 { font-size: 16px; } }
@media screen and (max-width: 768px) { .usp header { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; margin-bottom: 20px; }
  .usp header .kanji { flex-basis: 80px; max-width: 80px; flex-grow: 0; flex-shrink: 0; margin-right: 20px; } }
@media screen and (max-width: 414px) { .usp header .kanji { flex-basis: 60px; max-width: 60px; width: 60px; height: 60px; font-size: 30px; }
  .usp header .kanji .eng { font-size: 11px; } }
.usp img { display: block; }
@media screen and (min-width: 769px) { .usp.header_tate .img_sub { flex-basis: 20%; max-width: 20%; } }
@media screen and (max-width: 768px) { .usp.header_tate .img_sub { display: none; } }
@media screen and (min-width: 769px) { .usp.header_tate header { flex-basis: 15%; max-width: 15%; } }
@media screen and (max-width: 768px) { .usp.header_tate header { flex-basis: 100%; max-width: 100%; } }
@media screen and (min-width: 769px) { .usp.header_tate header h4 { text-align: center; margin-top: 30px; } }
.usp.header_tate header h4 .tate { text-align: left; }
@media screen and (max-width: 768px) { .usp.header_tate header h4 .tate { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; } }
@media screen and (min-width: 769px) { .usp.header_tate .img { flex-basis: 65%; max-width: 65%; }
  .usp.header_tate .img .text .button a { margin-left: 0; } }
@media screen and (max-width: 768px) { .usp.header_tate .img { width: 100%; max-width: 100%; } }
@media screen and (min-width: 769px) { .usp.header_tate .img .text { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; padding: 20px 10px 0; } }
@media screen and (min-width: 769px) { .usp.header_tate .img .text p { flex-basis: calc(69.230769% - 60px - 200px); max-width: calc(69.230769% - 60px - 200px); margin-right: 60px; flex-grow: 0; flex-shrink: 0; } }
@media screen and (min-width: 769px) and (max-width: 1400px) { .usp.header_tate .img .text p { flex-basis: calc(100% - 60px - 200px); max-width: calc(100% - 60px - 200px); } }
@media screen and (min-width: 769px) { .usp.header_tate .img .text .button { flex-basis: 200px; max-width: 200px; flex-grow: 0; flex-shrink: 0; } }
@media screen and (min-width: 769px) and (max-width: 1400px) { .usp.header_yoko .img_sub { flex-basis: 15%; max-width: 15%; } }
@media screen and (min-width: 769px) { .usp.header_yoko .img_sub { flex-basis: 20%; max-width: 20%; } }
@media screen and (max-width: 768px) { .usp.header_yoko .img_sub { display: none; } }
@media screen and (min-width: 769px) { .usp.header_yoko .text { flex-basis: 20%; max-width: 20%; padding-left: 40px; padding-right: 40px; } }
@media screen and (min-width: 769px) and (max-width: 1400px) { .usp.header_yoko .text { flex-basis: 35%; max-width: 35%; } }
@media screen and (max-width: 768px) { .usp.header_yoko .text { flex-basis: 100%; max-width: 100%; } }
@media screen and (min-width: 769px) { .usp.header_yoko .text header .kanji { margin-bottom: 5.5vw; } }
@media screen and (min-width: 769px) { .usp.header_yoko .text header h4 { margin-bottom: 2.5vw; text-align: center; } }
@media screen and (min-width: 769px) { .usp.header_yoko .img { flex-basis: 60%; max-width: 60%; } }
@media screen and (min-width: 769px) and (max-width: 1400px) { .usp.header_yoko .img { flex-basis: 50%; max-width: 50%; } }
@media screen and (max-width: 768px) { .usp.header_yoko .img { width: 100%; max-width: 100%; } }

@media screen and (min-width: 769px) { #usp01 { position: relative; }
  #usp01:before { content: ''; display: block; background: url("../images/index/usb_bg_circle01.jpg") no-repeat center center/contain; width: 321px; height: 325px; position: absolute; bottom: 100%; left: 0; z-index: -1; }
  #usp02 .img_sub img { margin-top: -35px; }
  #usp03 .img_sub { order: 1; }
  #usp03 .img_sub img { margin-top: -60px; }
  #usp03 .text { order: 2; }
  #usp03 .img { order: 3; }
  #usp04 .img_sub { order: 3; }
  #usp04 header { order: 2; }
  #usp04 .img { order: 1; }
  #usp04 .img .text { justify-content: flex-end; } }
@media screen and (max-width: 374px) { #usp01 header br { display: none; } }
/*==================================== plan
====================================*/
#plan { background: url("../images/common/bg_pattern.jpg") repeat; padding-top: 60px; padding-bottom: 60px; margin-bottom: 150px; }
#plan h3.line { color: #FFF; }
#plan h3.line span { color: #FFF; }
#plan h3.line:before { background-color: #FFF; }
#plan .plan_list { width: 100%; }
#plan .plan_list .slick-slide { margin-right: 50px; }
#plan .plan_list .slick-slide a { color: #FFF; }
#plan .plan_list .slick-slide a figure { margin-bottom: 20px; }
#plan .button a { border-color: #FFF; color: #FFF; }
#plan .button a:hover { border-color: #766d5e; }

/*==================================== news
====================================*/
#news .news { max-width: 1000px; margin-left: auto; margin-right: auto; }
#news .news li { border-bottom: 1px solid #eeeeee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 30px; }
#news .news li:last-child { margin-bottom: 0; }
#news .news li .date { letter-spacing: 0.1em; }

@media screen and (max-width: 768px) { #news .news li { margin-bottom: 20px; } }
@media screen and (min-width: 769px) { #news .news li .date { font-weight: bold; margin-right: 30px; } }
@media screen and (max-width: 768px) { #news .news li .date { display: block; font-size: 10px; } }
/*==================================== access
====================================*/
#access { background: url("../images/index/access_bg.jpg") no-repeat right top/contain; min-height: 39.25vw; }
@media screen and (max-width: 768px) { #access { background: url("../images/index/access_bg.jpg") no-repeat right 25% top/200%; min-height: 62vw; } }
@media screen and (max-width: 414px) { #access { background: url("../images/index/access_bg.jpg") no-repeat right 25% top/250%; } }
#access .text { max-width: 500px; padding-left: 10px; padding-right: 10px; }
#access .text h4 { color: #766d5e; font-size: 35px; line-height: 1.428571; margin-bottom: 30px; }
@media screen and (min-width: 2001px) { #access .text h4 { font-size: 35px; } }
@media screen and (min-width: 1280px) and (max-width: 2000px) { #access .text h4 { font-size: 1.75vw; } }
@media screen and (max-width: 1279px) { #access .text h4 { font-size: 22px; } }
#access .text .button a { margin-left: 0; }

/*# sourceMappingURL=index.css.map */
