@charset "utf-8";

@import url('reset.css');
@import url('swiper.min.css');
@import url('layout.css');

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (max-width: 1023px) and (min-width: 768px) {
}
@media (min-width: 1280px) {
	#header{flex-shrink: 0;width:230px;min-height:100%;display: flex;flex-direction: column;border-right:1px solid #BFBFBF;overflow: hidden}
	#header .util_area{padding-top: 46px;padding-bottom: 40px;padding-left: 35px;/*min-height: 33.888%;max-height: 366px;*/flex-grow: 1;margin-top: auto;background-color: #26A1DA;color: #fff;}
	#header .head{padding-top: 56px;padding-bottom: 60px;flex-shrink: 0;}
	#header .logo{margin-bottom: 63px;}
	#gnb{padding-left: 60px;}
	#gnb > li{margin-bottom: 36px}
	#gnb a{font-size: 19px;color: #000;transition: color 0.2s ease}
	#gnb .on a,
	#gnb a:hover{color: #26A1DA;font-weight: 500;}
	#header .util_area dt{font-size: 16px;font-weight: 600;margin-bottom: 8px;}
	#header .util_area dd{font-size: 15px;margin-bottom: 6px;}
	
	#footer{position: absolute;bottom: 32px;left:var(--leftRightPos);transition: left 0.2s}
	
	.main_section02 .quick_bnr{position: absolute;top:0;right:0;height: 100%;z-index: 2}
}
@media (max-width: 1540px) {
	:root {
	  --leftRightPos: 48px;
	}
	.hero_cont .tag_list > li{width: 160px;}
	.hero_cont .tag_list > li{margin-bottom: 20px}
	.hero_cont .ta{display: block}
}
@media (max-width: 1279px) {
	#wrap {flex-direction: column;}
	#header{background-color: #fff;border-bottom:1px solid #BFBFBF;}
	#header .head{padding-left: var(--leftRightMargin);padding-right: var(--leftRightMargin);}
	#header .logo img{height: 50px}
	#header .util_area{display: none}
	.hamburger{display: block}
	#header .head{display:flex;align-items: center;justify-content: space-between;height: 80px;}
	
	.hamburger.show {z-index: 1001;}
	#gnb{display: block}
	#gnb > li{margin-bottom: 3.5rem;opacity: 0;transform: translateX(30px);transition: 0.5s;}
	.total_nav.open #gnb > li{opacity: 1;transform: translateX(0);}
	#gnb > li > a{font-size: 2.8rem;font-weight: 700;color: #222;}
	
	#footer{font-size: 14px;color: #666;padding: 25px var(--leftRightMargin);}
	#footer .copy{color: #aaa;}
	
	.total_nav{visibility:hidden;position: fixed;width: 100%;height: 100%;top:0;left:0;transform: translateX(100%);background: rgba(0, 0, 0, 0.45);z-index: 1000;margin-left: 0;}
	.total_nav .total_inner{transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);position:absolute;top:0;right:-76%;padding: 120px 20px 20px 50px;width: 76%;min-height: 100%;display: flex;flex-direction: column;overflow-y: auto;background-color: #fff;}
	.total_nav.open{visibility:visible;transform: translateX(0);}
	.total_nav.open .total_inner{right: 0}
	
	.main_section02 .quick_bnr{display: flex;flex-wrap: wrap;}
	.main_section02 .quick_bnr > li{flex-shrink: 0;width: 50%;height: auto}
	.main_section02 .quick_bnr > li:nth-child(1){background-image: url(../images/side_bnr01_on.png)}
	.main_section02 .quick_bnr > li:nth-child(2){background-image: url(../images/side_bnr02_on.png)}
	.main_section02 .quick_bnr > li:nth-child(3){background-image: url(../images/side_bnr03_on.png)}
	.main_section02 .quick_bnr > li:nth-child(4){background-image: url(../images/side_bnr04_on.png)}
	
	.hero_cont .tag_list{display: flex}
	.hero_cont .ta{display: none}
	
	.custom_container{height: auto}
	.main_section01 .swiper_option{top:50px}
	.hero_cont{top: 100px}
	.main_swiper .swiper-slide{height: 0;min-height: 0;padding-bottom: 66%}
	
	.greeting_wrap{gap: 5rem;}
}
@media (max-width: 1023px) {
	#sub_container{padding-top: 5rem}
	.contents {padding-top: 2.5rem;}
	.subtitle{text-align: center}
	
	.greeting_wrap{display: block;padding-top: 0}
	.greeting_wrap .subtitle {margin-bottom: 2.4rem;}
	.greeting_wrap .img{text-align: center;margin-bottom: 4rem}
	.greeting_wrap .mo{display: block !important;}
	.greeting_wrap .pc{display: none !important;}
}
@media (max-width: 767px) {
	.pc,
	.pc.inline{display: none !important;}
	.mo{display: block !important;}
	.mo.inline{display: inline !important;}
	.mo.iblock{display: inline-block !important;}
	.mo.iflex{display: inline-flex !important;}
	
	colgroup.pc,
	col.pc,
	th.pc,
	td.pc{display: none !important;}
	
	colgroup.mo{display: table-column-group !important;}
	
	:root {
	  --leftRightMargin: 2rem;
	}
	
	#wrap{font-size: 1.8rem}
	
	#header .head{height: 60px}
	#header .logo img {height: 46px;}
	.hamburger{right: -5px}
	
	.main_swiper .swiper-slide{padding-bottom: 88%}
	.main_section01 .swiper_option,
	.hero_cont{left:var(--leftRightMargin);}
	.hero_cont{right: var(--leftRightMargin);}
	.hero_cont .title{font-size: 42px}
	.hero_cont .tag_list{gap: 30px}
	.hero_cont .tag_list > li {width: 140px;}
	
	.tbl_explain.mg01 {margin-top: 3.6rem;margin-bottom: 3.2rem;}
	.tbl_explain,
	.tbl_explain tbody,
	.tbl_explain tr,
	.tbl_explain td{display: block}
	.tbl_explain th{padding-bottom: 1.6rem}
	
	.img_explain{display: block}
	.img_explain > li{width: 100%}
	.img_explain > li + li{margin-top: 1.5rem}
	
	.title01{margin-bottom: 1.2rem}
	
	.subtitle{margin-bottom: 2.4rem}
	
	.tbl-value{padding: 1.5rem;}
	
	.search_zone,
	.search_zone .flex_wrap{flex-wrap: wrap;}
	.search_zone .pos_right{flex-grow: 1;}
	.search_zone .search_box{width: 100%;}
	.search_zone .has_btn{width: 100%}
	.search_zone .btn_search{flex-grow: 1;}
	
	.search_zone .flex{display: flex;gap: 1rem}
	.search_zone .wide{width: 100% !important}
	.search_zone .search_box.flex_wrap > * + * {margin-left: 0;margin-top: 1rem;}
	
	.greeting_wrap .btn_area{margin-bottom: 1.6rem}
}

@media (max-width: 500px) {
	.main_section01 .swiper_option{top:30px}
	.hero_cont{top:75px}
	.hero_cont .title{font-size: 36px}
	.main_section02 .quick_bnr > li{width: 100%}
	.hero_cont .tel{font-size: 24px;margin-bottom: 25px;}
	.hero_cont .tel em {padding-left: 25px;}
	.hero_cont .tel em:before{width: 16px;height: 16px;margin-top: -7px;background-size: cover}
	.hero_cont .tag_list{gap: 20px;}
	.hero_cont .tag_list > li{font-size: 14px;width: 100px;height: 46px;}
	.hero_cont .tag_list > li:after{width: 104px;height: 12px;background-size: cover}
	
	.btns.t1{font-size: 1.7rem;}
	
	#sub_container{padding-top: 3rem}
	
	.greeting_wrap .img{margin-bottom: 3rem}
	.greeting_wrap .tag{gap: 1rem;}
	
	.contact_box {height: 120px;}
	.contact_box .col{font-size: 1.7rem;letter-spacing: -0.04em}
	.contact_box .img{width: 80px;padding-top: 0;}
	.contact_box .img img{width: 29px}
	.contact_box .text{padding-right: 1.5rem;padding-top: 0.5rem;}
	.contact_box .tel{font-size: 3rem;margin-top: 0.2rem;}
}