@charset "utf-8";
/* Copyright 2022 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

パソコン、タブレット、スマートフォン（iPhone,Android) 共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

basic

------------------------------------------------------------ */

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 500;
}

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/NotoSansJP-Regular.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/NotoSansJP-Bold.woff") format("woff");
	font-display: swap;
}


*{font-family:'Noto Sans JP', Yu Gothic, "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

@media (-ms-high-contrast: none) {
	*{font-family:'Noto Sans JP', Yu Gothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
}

html{
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body{
	background: #FFF;
	color:#333333;
	font-weight: 400;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2;
    letter-spacing: 0.15em;
}

/* ------------------------------------------------------------

shortcodes

------------------------------------------------------------ */

/* font
---------------------------------------------- */
.normal{font-weight: normal !important;}
.bold{font-weight: bold !important;}
.italic{font-style: italic !important;}

/* display
---------------------------------------------- */
.none{display: none !important;}

/* margin
---------------------------------------------- */
.mb_none{margin-bottom: 0 !important;}

/* color
---------------------------------------------- */
.red01{color: #F26C33 !important;}


/* ------------------------------------------------------------

common

------------------------------------------------------------ */

/*--404ページ--*/	
.wrap_404{
	text-align: center;
	padding: 135px 30px 160px;
    background: #FFF;
}

.ttl_404{
	font-size: 5rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.txt_404{margin-bottom: 30px;}

/* リンク
---------------------------------------------- */
.link01{
	color: #188580;
	text-decoration: underline !important;
}

.link01:hover{text-decoration: none !important;}

.link_tel01{
	color: #333;
	pointer-events: none;
}

/* メール
---------------------------------------------- */
.txt_mail::after{content: "@";}

/* ページタイトル
---------------------------------------------- */

/* パンくずリスト
---------------------------------------------- */
.breadcrumb ul{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.breadcrumb ul li{
	display: inline;
	vertical-align: middle;
	color: #AAAAAA;
	padding-right: 15px;
	margin-right: 5px;
	font-size: 1.2rem;
	position: relative;
}

.breadcrumb ul li::after{
	content: "";
	display: block;
	background: url("../img/ico_arrow02.png") no-repeat 0 0;
	background-size: contain;
	width: 5px;
	height: 8px;
	position: absolute;
	top: 7px;
	right: 0;
}

.breadcrumb ul li:last-child{
	padding-right: 0;
	margin-right: 0;
}

.breadcrumb ul li:last-child::after{display: none;}

.breadcrumb ul li a{color: #AAAAAA;}

.breadcrumb ul li a:hover{text-decoration: none;}

/* 見出し
---------------------------------------------- */
.heading01{
    line-height: 1.2;
    margin-bottom: 60px;
}

.heading01 .ttl_en{
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 4.4rem;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.heading01 .ttl_jp{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

/* ボタン
---------------------------------------------- */
.btn_type01 a{
    position: relative;
    display: inline-block;
    min-width: 260px;
    padding: 22.5px 55px 22.5px 30px;
    color: #FFF;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
    transition: background .3s;
    background: #35373E;
}

.btn_type01 a:hover{background-color: #008E84;}

.btn_type01 a::before{
	content: "";
	display: block;
	background: url("../img/ico_arrow01.png") no-repeat 0 0;
	background-size: contain;
	width: 15px;
	height: 12px;
	position: absolute;
	top: 50%;
	right: 23px;
	margin-top: -6px;
	transition: right .3s;
	pointer-events: none;
}

.btn_type01 a:hover::before{right: 13px;}

.btn_type01 a .tab{
    display: inline-block;
    padding-right: 18px;
    background: url("../img/ico_tab01.png") no-repeat right center;
    background-size: 15px;
}

/* テーブル
---------------------------------------------- */
.tbl_type01{width: 100%;}

.tbl_type01 th,
.tbl_type01 td{
    display: block;
    line-height: 1.8;
}

.tbl_type01 th{
    color: #89949E;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
}

.tbl_type01 td{padding-bottom: 20px;}

.tbl_type01 tr:last-of-type td{padding-bottom: 0;}

/* リスト
---------------------------------------------- */
.list_type01 li{
    position: relative;
    padding-left: 12px;
    margin-bottom: 10px;
}

.list_type01 li:last-of-type{margin-bottom: 0;}

.list_type01 li::before{
    content: "";
    display: block;
    background: #9FBFD2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 0;
}

/* ------------------------------------------------------------

header

------------------------------------------------------------ */

#wrap_top{
	width: 100%;
	font-size: 1.1rem;
	line-height: 1.2;
	color: #b3b3b3;
    position: absolute;
    top: 90px;
    right: 0;
    text-align: right;
    z-index: 1;
    padding: 0 10px;
}

.wrap_top_inner .cloned{display: none;}	

.wrap_top_inner h1{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#header{
	background: #FFF;
	position: relative; 
}

.header_inner{
	width: 100%;
	height: 80px;
	display:flex;
    justify-content: space-between;
	align-items: center;	
    border-bottom: 1px solid #CACED2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: #FFF;
}

.header_inner .h_logo{
    width: 111px;
    margin-left: 40px;
}

.header_inner .h_logo a{
    display: block;
    transition: opacity .3s;
    line-height: 1;
}

.header_inner .h_logo a:hover{opacity: .8;}

.header_inner .h_logo a img{
    width: 100%;
    height: auto;
}

.drawer_inner{
    display: flex;
    align-items: center;
}

.d_tel{
    display: flex;
    align-items: center;
    background: #F3F4F5;
    padding: 0 30px;
    height: 80px;
    margin-left: 15px;
    border-bottom: 1px solid #CACED2;
}

.d_tel .inner p{
    font-size: 1.2rem;
    line-height: 1.4;
}

.d_tel .inner p:nth-child(1){letter-spacing: 0.2em;}
.d_tel .inner p:nth-child(2) a{
    display: block;
    font-family: 'Outfit';
    color: #34373E;
    font-weight: 600;
    letter-spacing: 0;
    padding-left: 24px;
    font-size: 2rem;
    background: url("../img/ico_tel01.png") no-repeat left center;
    pointer-events: none;
}
.d_tel .inner p:nth-child(3){letter-spacing: 0.12em;}

.d_logo,
.d_sns,
.d_info,
.btn_tel,
.btn_menu{display: none;}

/* グローバルナビ
---------------------------------------------- */
.nav_global ul{display: flex;}

.nav_global ul li a{
    display: block;
    color: #333333;
    line-height: 1.2;
    text-align: center;
    padding: 0 28px;
}

.nav_global ul li a .en{
    display: block;
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: 0;
    transition: color .3s;
}

.nav_global ul li a:hover .en{color: #009E92;}

.nav_global ul li a .jp{
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

/* ------------------------------------------------------------

footer

------------------------------------------------------------ */

#footer{
    position: relative;
    padding-top: 360px;
}

#footer::before{
    content: "";
    display: block;
    background: url("../img/bg_footer01_pc.jpg") no-repeat center;
    background-size: cover !important;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.footer_inner{
    display: flex;
    height: 660px;
}

.footer_map{width: 50%;}

.footer_map a{
    display: block;
    height: 100%;
}

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

.footer_info{
    width: 50%;
    display: flex;
    justify-content: center;
    background: #35373E;
    padding: 140px 0 15px;
}

.footer_info .inner{
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    line-height: 1.6;
    text-align: center;
    color: #FFF;
}

.f_logo{
    width: 152px;
    margin: 0 auto 40px;
}

.f_logo a{
    display: block;
    transition: opacity .3s;
}

.f_logo a:hover{opacity: .8;}

.f_logo a img{
    width: 100%;
    height: auto;
}

.f_list_content{
    width: 240px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 20px;
}

.f_list_content li{
    background: #FFF;
    padding: 5px 10px;
    line-height: 1;
    margin: 0 5px 10px;
    color: #33373E;
}

.f_contact{margin: 20px 0 100px;}

.f_contact .tel a{
    color: #FFF;
    pointer-events: none;
}

.f_contact .mail a{
    color: #FFF;
    text-decoration: underline;
}

.f_contact .mail a:hover{text-decoration: none;}

.wtap_f_sns{margin-bottom: 40px;}

.wtap_f_sns p{
    position: relative;
    display: inline-block;
    font-family: 'Outfit';
    font-weight: 600;
    letter-spacing: 0;
    padding: 0 70px;
    margin-bottom: 12px;
}

.wtap_f_sns p::before,
.wtap_f_sns p::after{
    content: "";
    display: block;
    background: #FFF;
    width: 60px;
    height: 1px;
    position: absolute;
    top: 50%;
    margin-top: -1px;
}

.wtap_f_sns p::before{ left: 0;}
.wtap_f_sns p::after{ right: 0;}

.wtap_f_sns .f_list_sns{
    display: flex;
    justify-content: center;
}

.wtap_f_sns .f_list_sns li{margin: 0 15px;}

.wtap_f_sns .f_list_sns li a{
    display: block;
    transition: opacity .3s;
    width: 30px;
}

.wtap_f_sns .f_list_sns li a:hover{ opacity: .8;}

.wtap_f_sns .f_list_sns li a img{
    width: 100%;
    height: auto;
}

.f_small{
    color: #CFD3D8;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

/* ページトップボタン
---------------------------------------------- */	
#pagetop{
	width: 40px;
	height: 40px;
	background: #2B2C31 url("../img/ico_arrow01.png") no-repeat center;
	background-size: 15px;
    transform: rotate(-90deg);
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s, background .3s;
}

#pagetop:hover{background-color: #008E84;}

#pagetop.pagetop_show{
	opacity: 1;
	pointer-events: auto;
}

#pagetop span{display: none;}


@media print{ /* 印刷時のみ */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	common

	------------------------------------------------------------ */
	
	/* レイアウト
	---------------------------------------------- */	
	#wrap_all{
		width: 1200px;
		transform: scale(0.8);
		transform-origin: 0 0;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	common

	------------------------------------------------------------ */
	
	html{
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		-ms-text-size-adjust: none;
	}
	
	/* リンク
	---------------------------------------------- */	
	.link_tel01{
        color: #18857F;
		pointer-events: auto;
		text-decoration: underline !important;
	}
	
    
    /* ------------------------------------------------------------

    header

    ------------------------------------------------------------ */
    #wrap_top{
        top: 60px;
        font-size: 1rem;
    }
    
    .header_inner{
        height: 50px;
        border-bottom: none;
        position: relative;
    }
    
    .header_inner  .h_logo{
        width: 90px;
        margin-left: 15px;
    }
    
    /* メニュー
	---------------------------------------------- */
	/*--メニューを開くボタン--*/
	.btn_menu{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 50px;
		height: 50px;
		background: #35373E;
		position: fixed;
		top: 0;
		right: 0;
        cursor: pointer;
		z-index: 10;
	}

	.btn_menu span{
		display: block;
		width: 22px;
		height: 2px;
		background: #FFF;
		transition: all 0.4s ease-out;
		position: absolute;
	}

	.btn_menu span:nth-of-type(1){top: 16px;}
	.btn_menu span:nth-of-type(2){top: 22px;}

	#wrap_all.open .btn_menu span:nth-of-type(1){ transform: rotate(-45deg); top: 16px;}
	#wrap_all.open .btn_menu span:nth-of-type(2){ transform: rotate(45deg); top: 16px;}
    
    .btn_menu p{
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        font-family: 'Outfit';
        font-weight: 600;
        font-size: 1rem;
        line-height: 1;
    }

    /*--メニュー内--*/
	.drawer{
		max-width: 100%;
		background: #FFF;
		width: 100%;
		height: 100%;
		padding-top: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		opacity: 0;
		pointer-events: none;
        transform: translate(-100%);
        visibility: hidden;
	}
    
    .mode-1024 #wrap_all .drawer{transition: all .5s;}

	#wrap_all.open .drawer{
        opacity: 1;
        pointer-events: auto;
        overflow: hidden;
        visibility: visible;
        transform: translateZ(0);
    }

	.drawer_inner{
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	#wrap_all.open .drawer_inner{pointer-events: auto;}
    
    .d_logo{
        display: block;
        width: 90px;
        position: absolute;
        top: 15px;
        left: 15px;
    }
    
    .d_logo a{display: block;}
    
    .d_logo a img{
        width: 100%;
        height: auto;
    }
    
    .btn_tel{
        display: block;
        background: #009E92;
        width: 50px;
		height: 50px;
		position: fixed;
		top: 0;
		right: 50px;
        cursor: pointer;
        z-index: 10;
    }
    
    .btn_tel a{
        display: block;
        height: 100%;
    }
    
    .btn_tel a .icon{
        width: 14px;
        position: absolute;
        top: 11px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .btn_tel a .icon img{
        width: 100%;
        height: auto;
    }
    
    .btn_tel a p{
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        font-family: 'Outfit';
        font-weight: 600;
        font-size: 1rem;
        line-height: 1;
    }
    
    .nav_global{
        padding: 50px 0 155px;
        background: #F3F4F5;
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
    }
    
    .nav_global ul{
        display: block;
        padding: 0 15px;
    }

    .nav_global ul li a{
        text-align: left;
        padding: 18px 0;
    }

    .nav_global ul li a .en{
        display: inline-block;
        font-size: 4rem;
    }

    .nav_global ul li a .jp{display: inline-block;}
    
    .d_sns{
        display: block;
        position: absolute;
        bottom: 125px;
        left: 15px;
    }
    
    .d_sns ul{display: flex;}
    
    .d_sns ul li:not(:last-child){margin-right: 30px;}
    
    .d_sns ul li a{
        display: block;
        width: 30px;
    }
    
    .d_sns ul li a img{
        width: 100%;
        height: auto;
    }
    
    .d_tel{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 100px;
        background: #009E92;
        margin: 0;
        padding: 0;
        justify-content: center;
        border-bottom: none;
    }
    
    .d_tel .inner p{color: #FFF;}
    
    .d_tel .inner p:nth-child(2) a{
        color: #FFF;
        background: url(../img/ico_tel03.png) no-repeat left center;
        background-size: 15px;
        pointer-events: auto;
        padding-left: 20px;
    }
    
    .d_info{
        display: block;
        color: #FFF;
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 50%;
        height: 100px;
        background: url("../img/bg_info01.jpg") no-repeat center;
        background-size: cover;
    }
    
    .d_info a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: #FFF;
        font-size: 1.8rem;
        letter-spacing: 0.25em;
        line-height: 1.6;
    }
    
    .d_info a span{
        font-size: 1.1rem;
        letter-spacing: 0.1em;
        padding-right: 12px;
        background: url("../img/ico_tab01.png") no-repeat right center;
        background-size: 12px;
    }
    
    
    /* ------------------------------------------------------------

	footer

	------------------------------------------------------------ */
    
    .footer_inner{
        display: block;
        height: auto;
    }

    .footer_map{
        width: 100%;
        position: relative;
        padding-top: 41.466%;
    }

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

    .footer_info{
        width: 100%;
        padding: 70px 15px 35px;
    }

    .footer_info .inner{font-size: 1.2rem;}
    
    .f_logo{width: 115px;}
    
    .f_list_content li{font-size: 1.3rem;}

    .f_contact{margin-bottom: 70px;}
    
    .f_contact .tel a{
        pointer-events: auto;
        text-decoration: underline;
    }
    
    .wtap_f_sns p{
        font-size: 1.3rem;
        margin-bottom: 16px;
    }
    
    .f_small{font-size: 1rem;}
    
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	common

	------------------------------------------------------------ */

	body{
		font-size: 13px;
		font-size: 1.3rem;
	}
	
	/*--404ページ--*/
	.wrap_404{padding: 100px 15px 100px;}
	
	.ttl_404{font-size: 3rem;}
	
	.txt_404 br:nth-of-type(2){display: none;}
    
    /* 見出し
    ---------------------------------------------- */
    .heading01{margin-bottom: 30px;}

    .heading01 .ttl_en{font-size: 3.3rem;}

    .heading01 .ttl_jp{font-size: 1.3rem;}
    
    /* ボタン
    ---------------------------------------------- */
    .btn_type01 a{
        min-width: 190px;
        padding: 17px 34px 17px 14px;
        color: #FFF;
        font-size: 1.3rem;
    }
    
    .btn_type01 a::before{right: 18px;}
    
    /* テーブル
    ---------------------------------------------- */
    .tbl_type01 td{padding-bottom: 15px;}
    
    /* リスト
    ---------------------------------------------- */
    .list_type01 li{margin-bottom: 6px;}
    
    .list_type01 li::before{top: 10px;}
	
	/* ------------------------------------------------------------

	header

	------------------------------------------------------------ */
	
	.wrap_top_inner{
		display: flex;
		flex-wrap: nowrap;
		padding: 2px 0;
		overflow: hidden;
	}

	.wrap_top_inner .cloned{display: block;}
	
	.wrap_top_inner h1{
		text-overflow: inherit;
		overflow: visible;
		white-space: nowrap;
	}
    
    /* メニュー
	---------------------------------------------- */
    /*--メニュー内--*/
    .nav_global ul li a .en{font-size: 3.1rem;}
    
	
	/* ------------------------------------------------------------

	footer

	------------------------------------------------------------ */
    #footer{padding-top: 48%;}
    
    #footer::before{background: url(../img/bg_footer01_sp.jpg) no-repeat center;}
    
    .footer_map{padding-top: 68.8%;}
	
	/* ページトップボタン
	---------------------------------------------- */
    #pagetop{
        width: 35px;
        height: 35px;
        bottom: 15px;
        right: 15px;
    }
	
}/*--@media--*/


@media only screen and (max-width:375px){ /* 表示領域が375px以下の場合に適用するスタイル */
    
	
	/* ------------------------------------------------------------

	header

	------------------------------------------------------------ */
    .header_inner  .h_logo{width: 70px;}
    
    .d_logo{ width: 70px;}
	
}/*--@media--*/


@media only screen and (max-width:350px){ /* 表示領域が350px以下の場合に適用するスタイル */
    
	
	/* ------------------------------------------------------------

	header

	------------------------------------------------------------ */
    .header_inner  .h_logo{width: 70px;}
    
    .d_logo{ width: 70px;}
    
    .d_tel .inner p{font-size: 1.1rem;}
    
    .d_tel .inner p:nth-child(2) a{
        padding-left: 17px;
        font-size: 1.8rem;
    }
    
    
    /* ------------------------------------------------------------

	footer

	------------------------------------------------------------ */
    .footer_info .inner{letter-spacing: 0.05em;}

}/*--@media--*/