﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
body{font-family: "Noto Sans JP",YuGothic,"Yu Gothic","游ゴシック体","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","Helvetica Neue",Helvetica,Arial,sans-serif!important;}

header #header #header_menu li a span,#bottom_menu {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}


/* アニメーション ---------------------------------------------------------------------------------------------*/
.fadein{
transform: translateY(50px);
transition: transform 1.5s ease, opacity 2s;
opacity: 0;
}
.fadein.start{transform: translateY(0);opacity: 1;}


/* cursor ---------------------------------------------------------------------------------------------*/
body{cursor: none;}
.cursor,.follower{
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}
.cursor{
	background-color: #f7bd0c;
	width: 8px;
	height: 8px;
	z-index: 10;
}
.follower{
	background-color: #d9f2ff;
	width: 40px;
	height: 40px;
	z-index: 9;
	transition: 0.3s;
	opacity: 0.7;
	transition-property: transform,background;
}
.follower.is-active{
	background-color: transparent;
	border: solid 1px #f7bd0c;
	transform: scale(1.5);
}
.cursor.is-active.more_move,.cursor.is-active.more_info{
	background-color: transparent;
}


/* main_img ---------------------------------------------------------------------------------------------*/
.vegas-slide, .vegas-slide-inner{transition: transform 1100ms ease 0s,opacity 1000ms ease 0.3s!important;}
.vegas-transition-slideLeft2-out, .vegas-transition-slideRight, .vegas-transition-slideRight2{opacity: 0;}
.vegas-transition-slideRight-in, .vegas-transition-slideRight2-in{opacity: 1;}
.vegas-timer{height: 4px!important;z-index: 5}
.vegas-timer-progress{background: #f7bd0c!important;}

#main_img {
	height: 100vh!important;
	z-index: 0;
}
#main_img::before{
	content: "";
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 0.3;
	background-color: #000;
}
#main_img .txt {
	z-index: 10;
	top: 47%;
	left: 12vw;
}
#main_img h2{
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	font-size: 4.4722222222vw;
}
#main_img p{
	letter-spacing: 2.3px;
}


/* header ---------------------------------------------------------------------------------------------*/
header{
	background-color: transparent;
}
header #header #header_menu li a span{
	color: #fff!important;
}
header #header #header_menu li a span:hover{
	opacity: 0.5;
}
header.transform{
	background: rgba(1, 80, 119, 0.59);
}
#logo .logo{width: 300px;}
#logo2.logo{width: 250px;}


/* index ---------------------------------------------------------------------------------------------*/
#intro_txt{
	padding-top: 120px;
	padding-bottom: 140px;
}
#intro_txt h2,#contents h3{
	font-size: 2.072222vw;
	font-weight: 600;
	margin-bottom: 35px;
}
#intro_txt h2{
	margin-bottom: 50px;
}
#contents{
	max-width: 100%;
}
#contents .box_wrap{
	padding-top: 250px;
}
#contents .box_wrap .box{
	background: url( "../dup/img/bg.png" ) center right / 48% no-repeat #006090 ;
	color: #fff;
	margin-bottom: 200px;
	position: relative;
	padding-top: 0;
}
#contents .box_wrap .box:last-of-type{
	margin-bottom: 130px;
}
#contents .box_wrap .box:nth-of-type(2){
	background: url( "../dup/img/bg2.png" ) center left / 48% no-repeat #ff8f18 ;
}
#contents .box_wrap .box:nth-of-type(2){
	padding-bottom: 0;
}
#contents .box:nth-of-type(2) h3 {
	color: #006090;
}
#contents .box_wrap .box::before,#contents .box_wrap .box::after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
}
#contents .box_wrap .box::before {
	background-image: url(../dup/img/img1.png);
	left: 0;
	top: -99px;
	z-index: -1;
}
#contents .box_wrap .box::after {
	background-image: url(../dup/img/img2.png);
	background-size: 100% 100%;
	right: -5px;
	top: -69px;
	z-index: -2;
	transform: rotate(-2deg);
	height: 110px;
}
#contents .box_wrap .box:nth-of-type(2)::before{
	background-image: url(../dup/img/img3.png);
	transform: scale(-1, 1);
}
#contents .box_wrap .box:nth-of-type(2)::after{
	background-image: url(../dup/img/img4.png);
	transform: scale(-1, 1) rotate(-2deg);
	right: auto;
    left: -5px;
}
#contents .box_wrap .box .d_flex{
	align-items: center;
}
#contents .box_wrap .box .grid_6.pd_l-r5per{
	padding-left: 5%;
	padding-right: 1%;
}
#contents .box_wrap .box:nth-of-type(2){
	padding-left: 1%;
	padding-right: 5%;
}
#contents .box_wrap .box .shadow-l{
	box-shadow: 0 2px 4px rgba(0,0,0,0);
}
#top_cms .top_cms_box:last-of-type{
	margin-bottom: 150px;
}
.top_cms_box h2{
	font-size: 40px;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
}


/* 他ページ ---------------------------------------------------------------------------------------------*/
#page_title span{display: inline-block;}
.svg_box2 svg,#page_title .svg_box{display: none;}
.cate_list li a{background-color: rgba(255, 236, 115, 0.79);}
.cate_list li a:hover{background-color: transparent;}


/* IE */
@media all and (-ms-high-contrast: none){ 
.more a{padding-top: 5px;}
#info_title_box .info_title span{padding: 11px 40px 12px;}
header #header #header_menu li:last-child a span{padding-top: 5px;padding-bottom: 5px;margin-top: 5px;}
#page_title h2 span{padding-top: 15px;}
#cms_2-a .cate .cate_title,#cms_2-b .cate .cate_title{padding-top: 10px;}
#cms_5-b .cate_box .arrow, .cms_5-b .cate_box .arrow{top: 56%;}
#page8 #tel_contact p a{padding: 15px 20px 17px;}
#page8 #form_box #form_bt div::after{top: 50%;}
#page9 .box_wrap .box p a{padding: 4px 10px 5px;}
#cms_6-a .cate .cate_title{padding-top: 10px;}
}

/* Edge */
@supports (-ms-ime-align: auto) {
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: fixed!important;}
}
/* Edge タブレット以下 */
@media all and (max-width: 768px){
@supports (-ms-ime-align:auto){
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: scroll!important;}
}
}

/* 幅 ---------------------------------------------------------------------------------------------*/
/* ---------- 1280 ---------- */
@media screen and (max-width: 1280px){
#intro_txt h2,#contents h3{
	font-size: 2.572222vw;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.cursor,.follower{display: none}
#main_img .txt{
	left: 8vw;
}
#main_img h2{
	font-size: 60px;
	margin-bottom: 20px;
}
#intro_txt h2, #contents h3 {
	font-size: 28px;
}
#top_cms .top_cms_box:last-of-type{
	margin-bottom: 100px;
}
.top_cms_box h2{
	font-size: 35px;
}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.drawer--left .drawer-nav{
	background-color: rgba(1, 80, 119, 0.94)!important;
}
.drawer-hamburger-icon,.drawer-hamburger-icon::after, .drawer-hamburger-icon::before{
	background-color: #fff!important;
}
.drawer-open .drawer-hamburger-icon {
	background-color: transparent!important;
}

#logo .logo,#logo2.logo{width: 240px;}
#main_img .txt{
	left: 20px;
}
#main_img h2 {
	font-size: 40px;
	margin-bottom: 15px;
}
#main_img p {
	letter-spacing: 1.3px;
	font-size: 14px;
}
#intro{
	background-position: top 105% left!important;
	background-repeat: no-repeat!important;
	background-size: contain!important;
}
#intro #intro_txt {
	padding-bottom: 70px;
	padding-top: 60px;
}
#intro_txt h2, #contents h3 {
	font-size: 24px;
}
#contents .grid_11{
	width: 100%!important;
}
#contents .box_wrap {
    padding-top: 172px;
}
#contents .box_wrap .box{
	margin-bottom: 140px;
	padding-top: 20px;
	background: url(../dup/img/bg.png) top 54px center / 120% no-repeat #006090;
}
#contents .box_wrap .box:nth-of-type(2) {
	background: url(../dup/img/bg2.png) top 20% left -42px / 100% no-repeat #ff8f18;
}
#contents .box_wrap .box:last-of-type{
	margin-bottom: 75px;
}
#contents .box_wrap .box::before, #contents .box_wrap .box::after{
	width: 102%;
	top: -99px;
}
#contents .box_wrap .box .d_flex{
	margin-bottom: 35px;
}
#contents .box_wrap .box .grid_6.pd_l-r5per,#contents .box_wrap .box:nth-of-type(2) {
	padding-left: 0;
	padding-right: 0;
}
#top_cms .top_cms_box:last-of-type{
	margin-bottom: 75px;
}
.top_cms_box h2{
	font-size: 30px;
}
#page_title span{
	font-size: 20px;
}
}



/* color */
.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #006090} /* メインカラー */
.txt_color2{color: #d9f2ff} /* サブカラー */
.txt_color3{color: #ff8f18} /* アクセントカラー1 */
.txt_color4{color: #f7bd0c} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #006090} /* メインカラー */
.bg_color2{background-color: #d9f2ff} /* サブカラー */
.bg_color3{background-color: #ff8f18} /* アクセントカラー1 */
.bg_color4{background-color: #f7bd0c} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #006090}
.border_color2{border-color: #d9f2ff}
.border_color3{border-color: #ff8f18}
.border_color4{border-color: #f7bd0c}

/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #006090} /* メインカラー */
.hvr_txt_color2:hover{color: #d9f2ff} /* サブカラー */
.hvr_txt_color3:hover{color: #ff8f18} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f7bd0c} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #006090} /* メインカラー */
.hvr_bg_color2:hover{background-color: #d9f2ff} /* サブカラー */
.hvr_bg_color3:hover{background-color: #ff8f18} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f7bd0c} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #006090}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #ff8f18}
.hvr_border_color4:hover{border-color: #f7bd0c}
