@charset "utf-8";

/*=======================================================
 common.css
　全ページ共通や基本設定
=======================================================*/

/*======================================================
 基本設定
========================================================*/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600;700;800;900&display=swap');

html { font-size: 62.5%; }

body { font-size: 1.4rem; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; /*2022年版ゴシック系設定*/ color: #444; line-height: 1.3em; overflow: hidden; }



main { /*overflow: hidden;*/ position: relative; }

ul li { list-style-type: none; margin-bottom: 5px; }

dl dt { font-weight: bold; margin-bottom: 5px; }

dl dd { margin-bottom: 15px; line-height: 1.5em; }

p { font-size: 1.6rem; line-height: 1.5em; }

img { max-width: 100%; }


a, a.active { color: #444; text-decoration: none; transition: all 0.3s ease; }

/*a:hover { color: #ffcf07; }*/


a > img:hover { opacity: 0.8; filter: alpha(opacit80); -ms-filter: "alpha(opacity=80)"; -khtml-opacity: 0.8; -moz-opacity: 0.8; transition: all 0.5s ease; }


.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.sub-page-ttl { padding-top: 100px; padding-bottom: 0; text-align: center; font-weight: 500; font-size: 64px; line-height: 96px; letter-spacing: 0.05em; }

.sp-br, .pc-br { display: none; }


@media screen and (min-width:768px) {
    .visible-xs { display: none !important; }
    .hidden-xs { display: block !important; }
}

@media screen and (max-width:767px) {
    .visible-xs { display: block !important; }
    .hidden-xs { display: none !important; }
}



/*----------- SP -------------*/
@media screen and (max-width: 767px) {
    .sp-br { display: block; }

    .sp-none { display: none; }
    /*スマートフォンの時だけ非表示*/

}

/*----------- PC・タブレット ------------*/

@media (min-width:768px) {
    .pc-br { display: block; }

    .pc-none { display: none; }
    /*PCタブレットの時だけ非表示*/
}



/*------- font汎用 ------*/
.font-orenge { color: #FF4B07; }
.font-yellow { color: #f79c23; }
.font-s { font-size: 1.2rem; }

/*----------------------------
 h 見出し
-----------------------------*/
/* h1はヘッターのロゴ・会社名で使用 */

.h-ttl-wrap { width: 100%; text-align: center; }

h2 { font-size: 4.0rem; font-weight: 400; line-height: 1.3em; margin-bottom: 40px; text-align: center; }

h2.top-h2 { padding-top: 10px; background: url("../images/img-h2-ttl.png") no-repeat top center; }

h2 > .h2-subttl { display: block; font-size: 1.4rem; line-height: 1.0em; }

h3 { font-size: 3.5rem; font-weight: 400; line-height: 1.3em; margin-bottom: 50px; border-bottom: solid 3px #000; display: inline-block; }

h4 { font-size: 1.6rem; font-weight: bold; line-height: 1.3em; margin-bottom: 10px; }

.en { font-family: 'Frank Ruhl Libre', serif; }


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    h2, h3 { margin-bottom: 20px; }
    h4 { margin-bottom: 10px; }
}

/*----------------------------
 button
-----------------------------*/
.btn-block { width: 100%; /*padding-top: 70px;*/ }

/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    .btn-block { padding-top: 10px; padding-bottom: 10px; }
}

a.button { display: block; padding: 25px; font-size: 1.4rem; text-align: center; margin: 0 auto; position: relative; width: 90%; max-width: 300px; }

/*-- yellowボタン --*/
a.button.button-yellow { background: #ffcf07; color: #000; border: solid 2px #ffcf07; transition: all 0.5s ease; }

a.button.button-yellow:hover { background: #FFF; }


/*-- blackボタン --*/
a.button.button-black { background: #000; color: #FFF; border: solid 2px #000; transition: all 0.5s ease; }

a.button.button-black:hover { background: #FFF; color: #000; }


/*-- 罫線枠のボタン --*/
a.button.button-line { border: solid 1px #FFF; color: #FFF; transition: all 0.5s ease; }

a.button.button-line:hover { color: #121212; background: #FFF; }


/*-- 矢印ボタン　黒 --*/
a.button.button-arrow-black { background: #121212 url("../images/ico-arrow01.svg") right 35px center no-repeat; background-size: 89px; color: #FFF; text-align: left; max-width: 1000px; transition: all 0.5s ease; }

a.button.button-arrow-black:hover { background: #121212 url("../images/ico-arrow01.svg") right 10px center no-repeat; background-size: 89px; transition: all 0.5s ease; }


/*-- Learn Moreボタン --*/
.btn-block { text-align: center; }
.learn-more { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: 'Frank Ruhl Libre', serif; }
.learn-more { width: 20rem; height: auto; }
.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 4rem; height: 4rem; background: #282936; border-radius: 3.625rem; }
.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; }
.learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 1.2rem; width: 1.125rem; height: 0.125rem; background: none; }
.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.4rem; right: -0rem; width: 1rem; height: 1rem; border-top: 0.2rem solid #fff; border-right: 0.2rem solid #fff; transform: rotate(45deg); }
.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: 600; line-height: 1.8; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; }
.learn-more:hover .circle { width: 100%; }
.learn-more:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); }
.learn-more:hover .button-text { color: #fff; }
.comingsoon { pointer-events: none; }
.comingsoon .button-text { margin: 0 0 0 2.85rem; }


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    /*-- 矢印ボタン　赤 --*/
    a.button.button-arrow-red,
    a.button.button-arrow-red:hover { background-image: none; text-align: center; }

    /*-- 矢印ボタン　黒 --*/
    a.button.button-arrow-black,
    a.button.button-arrow-black:hover { background-image: none; text-align: center; }
    .learn-more .circle { width: 3.7rem; height: 3.7rem; }
}



/*======================================================
 コンテンツ レイアウト
========================================================*/

.inner-wrap { max-width: 1400px; width: 100%; padding: 70px 0 100px 0; margin: 0 auto 90pt; box-sizing: border-box; }

#service { /*max-width: 855pt;*/ max-width: 100%; margin: 0 auto 90pt; }
#service .inner-wrap { max-width: 855pt; }

#easypage-achievement .achievement-wrap { max-width: 855pt; margin: 0 auto 90pt; }

#top-info { /*max-width: 855pt;*/ max-width: 100%; margin: 150pt auto 150pt; }
#top-info .inner-wrap { max-width: 855pt; }

.footer-inner-wrap { max-width: 1000px; width: 95%; margin: 0 auto; box-sizing: border-box; }

.col2-box, .col3-box, .col4-box { justify-content: space-between; margin-bottom: 70px; }

.col2-box:last-child, .col3-box:last-child, .col4-box:last-child { margin-bottom: 0; }

.col2-box > .c-box { width: 48%; box-sizing: border-box; }

/*.col3-box > .c-box { width: 32%; box-sizing: border-box; }*/

.col3-box > .c-box { width: 10%; box-sizing: border-box; }

.col4-box > .c-box { width: 24%; box-sizing: border-box; }


.col3-box::before { /*justify-contentで最後の行を左寄せにする方法（3カラム）*/ content: ""; display: block; width: 32%; order: 1; }

.col3-box::after { /*justify-contentで最後の行を左寄せにする方法（3カラム）*/ content: ""; display: block; width: 32%; }


.col4-box::before { /*justify-contentで最後の行を左寄せにする方法（4カラム）*/ content: ""; display: block; width: 24%; order: 1; }

.col4-box::after { /*justify-contentで最後の行を左寄せにする方法（4カラム）*/ content: ""; display: block; width: 24%; }



/*--- table ---*/
table { border-collapse: collapse; border-spacing: 0; margin: 10px auto; width: 100%; }


tr { border-bottom: 10px solid #FFF; }

th { background-color: #F6F6F6; font-weight: 600; padding: 15px 2vw 15px 2vw; text-align: left; vertical-align: top; }

td { background-color: #F6F6F6; padding: 15px 2vw 15px 2vw; text-align: left; }



/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    .inner-wrap { padding: 50px 0 30px 0; margin: 0 auto 30pt; }

    .col2-box .c-box, .col3-box .c-box, .col4-box .c-box { width: 100%; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 50px; }

    .col2-box .c-box:last-child, .col3-box .c-box:last-child, .col4-box .c-box:last-child { margin-bottom: 0; }
    .c-box p { text-align: left; }
}


/*----------- タブレット ------------*/
@media screen and (min-width:768px) and ( max-width:960px) {
}

/*----------- タブレットPC ------------*/
@media screen and (min-width:768px) {
}

/*======================================================
 コンテンツの動き実装
========================================================*/
/*------------------------------------------------
スタート時は要素自体を透過0にするためのopacity:0;を指定する
-------------------------------------------------*/

.delayScroll > .box { opacity: 0; }

/*------------------------------------------------
ふわっと動かす
------------------------------------------------*/

.delayScroll .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }

@keyframes fadeUpAnime {
    from { opacity: 0; transform: translateY(100px); }

    to { opacity: 1; transform: translateY(0); }
}









/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {

    /*#header h1 { 
			width:60%;
			float:none;
			}*/
    #header { height: 60px; }
    #header h1 > .header-logo,
    #header h1 > .header-logo:hover { background-size: 80% auto; }
}





/*--------------------------------------------------------
 ヘッダーー
---------------------------------------------------------*/


header::after { content: ""; display: block; height: 60px; }

@media (max-width: 950px) {
    header::after { content: ""; display: block; height: 45px; }
}

/*header-pc*/

header { position: relative; width: 100%; }

.header-pc-fixed { width: 100%; position: fixed; display: flex; justify-content: space-between; z-index: 8; background: rgba(255,207,7,0.7); }

.header-pc-logo { position: relative; margin: 10px 0 10px 30px; z-index: 10; }

.header-pc-logo-black { height: 45px; }

.header-pc-nav { position: absolute; top: -25px; right: 102px; z-index: 10; width: 100%; }

.header-pc-nav-list { position: relative; display: inline-block; height: 36px; margin-top: 34px; margin-right: 32px; font-weight: bold; font-size: 14px; line-height: 21px; }

.header-pc-nav-list::before { position: absolute; display: inline-block; content: ""; bottom: 0; left: 0; height: 2px; width: 0; background-color: #333; transition: 1s; }

.header-pc-nav-list:hover::before { width: 100%; }

.header-pc-nav-list a { display: inline-block; height: 36px; font-weight: bold; font-size: 14px; line-height: 21px; }

.header-pc-nav-listimg { position: relative; padding-right: 28px; }

.header-pc-nav-listimg img { position: absolute; top: 0px; right: 0; width: 27px; }

/*header-sp*/

.header-sp { display: none; }

.header-sp__img { position: relative; height: 35px; margin: 10px; z-index: 9; }

.header-sp-btn { position: relative; z-index: 9; }

.header-sp__img img { height: 100%; }


@media (max-width: 950px) {
    .header-pc { display: none; }
    .header-sp { background: rgba(255,207,7,0.7); position: fixed; display: flex; justify-content: space-between; width: 100%; z-index: 8; }
}

/*btn*/

.header-pc-btn, .header-pc-btn span, .header-sp-btn, .header-sp-btn span { display: inline-block; transition: all .4s; box-sizing: border-box; }

.header-pc-btn { position: relative; width: 35px; height: 29px; background: none; border: none; appearance: none; cursor: pointer; z-index: 9; }

.header-sp-btn { position: relative; width: 30px; height: 22px; background: none; border: none; appearance: none; cursor: pointer; z-index: 9; }

.header-pc-btn span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #333; border-radius: 4px; transition: 1s; }

.header-sp-btn span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #333; border-radius: 1px; transition: 1s; }

.header-pc-btn span:nth-of-type(1) { top: 0; }

.header-pc-btn span:nth-of-type(2) { top: 13px; }

.header-pc-btn span:nth-of-type(3) { bottom: 0; }

.header-sp-btn span:nth-of-type(1) { top: 0; }

.header-sp-btn span:nth-of-type(2) { top: 10px; }

.header-sp-btn span:nth-of-type(3) { bottom: 0; }

.header-pc-btn { margin-top: 19px; margin-right: 30px; }

.header-sp-btn { margin-top: 17px; right: 15px; }

.header-pc-btn_active button span:nth-of-type(1) { transform: rotate(45deg) translate(8px, 10px); background-color: #fff; }

.header-pc-btn_active button span:nth-of-type(2) { opacity: 0; background-color: #fff; }

.header-pc-btn_active button span:nth-of-type(3) { transform: rotate(-45deg) translate(8px, -10px); background-color: #fff; }

.header-sp-btn_active span:nth-of-type(1) { transform: rotate(45deg) translate(7px, 7px); background-color: #fff; }

.header-sp-btn_active span:nth-of-type(2) { opacity: 0; background-color: #fff; }

.header-sp-btn_active span:nth-of-type(3) { transform: rotate(-45deg) translate(7px, -7px); background-color: #fff; }

.header-pc-logo-white { opacity: 0; position: absolute; top: 0; left: 0; transition: 1s; }
.header-pc-logo a:hover .header-pc-logo-black { opacity: 0; }
.header-pc-logo-black { transition: 1s; }

.header_active .header-pc-logo-white { opacity: 1; }

.header_active .header-pc-logo-black { opacity: 0; }

.header-pc-fixed-menu-wrap { top: -100vh; left: 200%; transition: 1s; position: absolute; display: flex; width: 100%; height: 100vh; background-color: #333; z-index: 6; }

/*menu-pc*/

.header_active .header-pc-fixed-menu-wrap { top: 0; left: 0; }

.header-pc-fixed-left-wrap { width: 55%; margin-left: 10%; margin-top: 185px; }

.header-pc-fixed-rightmenu { width: 35%; max-width: 270px; margin-top: 185px; text-align: center; }

.header-pc-fixed-left-mainmenu > a { position: relative; margin-bottom: 10px; font-weight: 500; font-size: 32px; line-height: 62px; color: #fff; }

/*.header-pc-fixed-left-mainmenu:nth-child(3)>a::after {
    position: absolute;
    left: calc(100% + 30px);
    content: '▼';
    font-size: 15px;
}

.header-pc-fixed-left-mainmenu:nth-child(3)>a::before {
    position: absolute;
    display: inline-block;
    top: calc(100% + 5px);
    left: 0;
    content: "";
    height: 3px;
    width: 0;
    transition: 0.5s;
    background-color: #fff;
}*/

.header-pc-fixed-left-mainmenu:hover > a::before { width: 100%; }

.header-pc-fixed-leftmenu { display: inline-block; }

.header-pc-fixed-left-mainmenu ul { overflow: hidden; height: 0; transition: 1s; }

.header-pc-fixed-left-mainmenu:hover ul { height: 65px; margin-top: 5px; }

.header-pc-fixed-leftmenu a { position: relative; display: inline-block; margin: 0 15px; padding-bottom: 6px; color: #fff; font-weight: 500; font-size: 16px; line-height: 23px; }

.header-pc-fixed-leftmenu a::before { position: absolute; display: inline-block; bottom: 0; left: 0; content: ""; height: 2px; width: 0; transition: 0.5s; background-color: #fff; }

.header-pc-fixed-leftmenu a:hover::before { width: 100%; }

.headr-pc-fixed-privacy { margin-bottom: 30px; display: inline-block; font-weight: 500; font-size: 30px; line-height: 46px; color: #FFFFFF; }

.header-pc-fixed-contact { position: relative; display: inline-block; padding: 12px 34px 12px 66px; margin-bottom: 20px; background: #FFFFFF; box-shadow: inset 0px -4px 3px rgba(0, 0, 0, 0.15); border-radius: 50px; transition: 1s; }

.header-pc-fixed-contact:hover { background: #444; color: #fff; }

.header-pc-fixed-contact img { position: absolute; top: 12px; left: 35px; transition: 1s; width: 20px; }

.header-pc-fixed-contact img:nth-child(1) { opacity: 1; }

.header-pc-fixed-contact img:nth-child(2) { opacity: 0; }

.header-pc-fixed-contact:hover img:nth-child(1) { opacity: 0; }

.header-pc-fixed-contact:hover img:nth-child(2) { opacity: 1; }

.header-pc-fixed-sns li:nth-child(1) { margin-right: 12.5px; margin-left: 12.5px; margin-top: 4px; display: inline-block; }

.header-pc-fixed-sns li:nth-child(2) { margin-right: 12.5px; margin-left: 12.5px; margin-top: 3px; display: inline-block; }

.header-pc-fixed-sns li:nth-child(3) { margin-right: 12.5px; margin-left: 12.5px; display: inline-block; }
.header-pc-fixed-sns li:nth-child(4) { margin-right: 12.5px; margin-left: 12.5px; display: inline-block; }
.header-pc-fixed-sns li:nth-child(4) img { width: 35px; }
.header-pc-fixed-sns li img { width: 100%; transition: 1s; }

.header-pc-fixed-sns li:hover img { opacity: 0.7; }

/*header-sp-menu*/

.header-sp-img-white { opacity: 0; position: absolute; top: 0; left: 0; transition: 1s; }

.header-sp-logo { transition: 1s; }

.header_active .header-sp-img-white { opacity: 1; }

.header_active .header-sp-logo { opacity: 0; }

.header-sp-fixed-menu { top: -100vh; left: 200%; transition: 1s; position: absolute; width: 100%; height: 100vh; background-color: #333; z-index: 6; }

.header_active .header-sp-fixed-menu { top: 0; left: 0; }

.header-sp-fixed-menu-left { margin-top: 110px; margin-bottom: 110px; display: block; width: 100%; }

.header-sp-fixed-menu-right { width: 100%; display: block; text-align: center; }

.header-sp-fixed-menu-left-list { margin-bottom: 15px; }

.header-sp-fixed-menu-left-service > p, .header-sp-fixed-menu-left-blog > p { position: relative; }

.header-sp-fixed-menu-left-list > a, .header-sp-fixed-menu-left-service > p > a, .header-sp-fixed-menu-left-blog > p > a { position: relative; display: block; margin: 0 46px 0 40px; font-weight: 500; font-size: 18px; line-height: 37px; color: #FFFFFF; }

/*.header-sp-fixed-menu-plus {
    position: absolute;
    top: 11px;
    right: 46px;
    width: 15px;
    height: 15px;
}

.header-sp-fixed-menu-plus span:nth-child(1) {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 0;
    width: 15px;
    height: 2px;
    background-color: #fff;
    transition: 0.5s;
}

.header-sp-fixed-menu-plus span:nth-child(2) {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 0;
    width: 15px;
    transform: rotate(90deg);
    height: 2px;
    background-color: #fff;
    transition: 0.5s;
}*/

/*.header-sp-fixed-menu-left-service_active .header-sp-fixed-menu-plus span:nth-child(1), .header-sp-fixed-menu-left-blog_active .header-sp-fixed-menu-plus span:nth-child(1) {
    transform: rotate(-180deg);
}

.header-sp-fixed-menu-left-service_active .header-sp-fixed-menu-plus span:nth-child(2), .header-sp-fixed-menu-left-blog_active .header-sp-fixed-menu-plus span:nth-child(2) {
    top: 7px;
    left: 0;
    width: 15px;
    height: 2px;
    transform: rotate(0deg);
}*/

.header-sp-fixed-menu-left-list ul { height: 0; overflow: hidden; transition: 1s; }

.header-sp-fixed-menu-left-service_active ul { height: 145px; }

.header-sp-fixed-menu-left-blog_active ul { height: 27px; }

.header-sp-fixed-menu-list a { margin-left: 60px; margin-top: 5px; font-weight: 500; font-size: 16px; line-height: 24px; color: #FFFFFF; }

.header-sp-fixed-menu-privacy { margin-left: 40px; display: block; margin-bottom: 30px; text-align: left; font-weight: 500; font-size: 18px; line-height: 28px; color: #fff; }

.header-sp-fixed-menu-contact { margin-bottom: 30px; position: relative; display: inline-block; padding: 17px 72px 18px 98px; font-weight: bold; font-size: 14px; line-height: 21px; text-align: center; color: #333333; background-color: #fff; border-radius: 3px; transition: 1s; }

.header-sp-fixed-menu-contact img { position: absolute; top: 19px; left: 72px; width: 17px; transition: 1s; }

.header-sp-fixed-menu-contact:hover { background: #333; color: #fff; }

.header-sp-fixed-menu-contact img:nth-child(1) { opacity: 1; }

.header-sp-fixed-menu-contact img:nth-child(2) { opacity: 0; }

.header-sp-fixed-menu-contact:hover img:nth-child(1) { opacity: 0; }

.header-sp-fixed-menu-contact:hover img:nth-child(2) { opacity: 1; }
.header-sp-fixed-menu-sns { display: flex; justify-content: center; }
.header-sp-fixed-menu-sns li { width: calc((50% / 3) - 10px); }

.header-sp-fixed-menu-sns li img { height: 100%; transition: 1s; }


.header-sp-fixed-menu-sns li:hover img { opacity: 0.7; }




/*======================================================
 ナビゲーション
========================================================*/
.openbtn { display: none; }


/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {


    .openbtn.sp { display: block; background: transparent; }
}

/*------------------------------------------------
 スマホ ナビゲーション
-------------------------------------------------*/
@media screen and (max-width:960px) {

    /*アクティブになったエリア*/
    #g-nav.panelactive { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position: fixed; z-index: 999; top: 0; width: 100%; height: 100vh; }

    /*丸の拡大*/
    .circle-bg { position: fixed; z-index: 3; /*丸の形*/ width: 100px; height: 100px; border-radius: 50%; background: #FFCF07; /*丸のスタート位置と形状*/ transform: scale(0); /*scaleをはじめは0に*/ right: -50px; top: -50px; transition: all 1s; /*0.6秒かけてアニメーション*/ }

    .circle-bg.circleactive { transform: scale(50); /*クラスが付与されたらscaleを拡大*/ }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list { display: none; /*はじめは表示なし*/ /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }

    #g-nav.panelactive #g-nav-list { display: block; /*クラスが付与されたら出現*/ }

    /*ナビゲーション*/
    #g-nav ul { opacity: 0; /*はじめは透過0*/ /*ナビゲーション天地中央揃え*/ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%); }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul { opacity: 1; }


    /*リストのレイアウト設定*/
    #g-nav li { text-align: center; list-style: none; white-space: nowrap; }

    #g-nav li a { color: #000; text-decoration: none; padding: 10px; display: block; /*text-transform: uppercase; すべてのテキストを大文字にする*/ letter-spacing: 0.1em; font-weight: bold; font-size: 1.8rem; }


    /*========= ボタンのためのCSS ===============*/
    .openbtn { position: fixed; top: 7px; right: 10px; z-index: 9999; /*ボタンを最前面に*/ cursor: pointer; width: 50px; height: 50px; }

    /*×に変化*/
    .openbtn span { display: inline-block; transition: all .4s; position: absolute; left: 14px; height: 3px; border-radius: 2px; background-color: #333; width: 45%; }

    .openbtn span:nth-of-type(1) { top: 15px; }
    .openbtn span:nth-of-type(2) { top: 23px; }
    .openbtn span:nth-of-type(3) { top: 31px; }

    .openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; }

    .openbtn.active span:nth-of-type(2) { opacity: 0; }

    .openbtn.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }
}



/*------------------------------------------------
 PCナビゲーション　
-------------------------------------------------*/
@media screen and (min-width:961px) {
    nav ul { list-style: none; display: flex; justify-content: center; position: absolute; top: 20px; right: 20px; }

    nav ul li a { display: block; text-decoration: none; color: #000; padding: 10px; transition: all 0.3s; }

    /*nav ul li a:hover { color:#888; }*/

}


/*======================================================
service レイアウト共通
========================================================*/
#service .service-block.col1-box { margin-bottom: 70px; }

#service .service-info > p { font-size: 1.4rem; }

#service .service-info > p.service-name { font-size: 1.6rem; font-weight: bold; }

#service .service-block .service-img { margin-bottom: 5px; }

#service section.service-development .btn-block { padding-top: 20px; }


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
    #service section.service-development .service-block.col1-box .btn-block > a { margin-right: 0; }
}

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
    #top #service { margin: 0 0; }
    #top-info { margin: 0 0; }
    section { margin: 0 10px; }
    #service .service-block.col1-box { margin-bottom: 50px; }

    #service .service-block .service-img { text-align: center; order: 1; }

    #service .service-block .service-info { order: 2; }
}



/*======================================================
　JOIN US 採用（ページ下部）
========================================================*/
#join-us { max-width: 855pt; margin: 0 auto 90pt; }
#join-us .join-us-bg { display: block; margin: 0 auto 50px; }

#join-us .join-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }

#join-us .join-wrap .join-list { width: calc((100% / 3) - 30px); background: #fff; box-shadow: 0 0 8px #c5c5c5; padding: 15px; margin-bottom: 50px; text-align: center; }
#join-us .join-wrap .join-list:nth-child(7),
#join-us .join-wrap .join-list:nth-child(8),
#join-us .join-wrap .join-list:nth-child(9) { margin-bottom: 0; }
#join-us .join-wrap .join-list p { font-size: 14px; }

#join-us .join-wrap .join-list .ttl { font-size: 16px; padding-bottom: 10px; }
#join-us .btn-block { padding-top: 50px; }


/*----------- SP -------------*/
@media screen and (max-width: 767px) {
    #join-us { margin: 0 10px; }
    #join-us .join-wrap .join-list { width: calc((100% / 2) - 8px); margin-bottom: 15px; padding: 5px; }
    #join-us .join-wrap .join-list .ttl { font-size: 12px; }
    #join-us .join-wrap .join-list p { font-size: 10px; }
    #join-us .join-wrap .join-list:nth-child(1),
    #join-us .join-wrap .join-list:nth-child(2),
    #join-us .join-wrap .join-list:nth-child(3),
    #join-us .join-wrap .join-list:nth-child(4) { height: 100px; }
    #join-us .join-wrap .join-list:nth-child(5),
    #join-us .join-wrap .join-list:nth-child(6) { height: 80px; }

    #join-us .join-wrap .join-list:nth-child(4),
    #join-us .join-wrap .join-list:nth-child(5),
    #join-us .join-wrap .join-list:nth-child(6),
    #join-us .join-wrap .join-list:nth-child(7),
    #join-us .join-wrap .join-list:nth-child(8),
    #join-us .join-wrap .join-list:nth-child(9) { margin-bottom: 15px; }
}


/*======================================================
お問い合わせエリア（ページ下部）
========================================================*/
#f-contact h2 { margin-bottom: 0; font-size: 2.0rem; }

#f-contact .contact-web-block { margin-top: 40px; text-align: center; max-width: 400px; margin: 40px auto 0 auto; }

#f-contact .contact-web-block .button { width: 300px; }

#f-contact .contact-web-block .icon-line { width: 100px; }


#f-contact .contact-web-block .icon-line > a { width: 75px; height: 75px; display: block; }


#f-contact .contact-tel-block { margin-top: 20px; justify-content: space-around; }

#f-contact .contact-tel-block > div { width: 100%; }

#f-contact .contact-tel-block > .contact-tel { font-size: 1.6rem; font-weight: bold; }

#f-contact .contact-tel-block > .contact-tel > a > .tel-number { font-size: 3.6rem; }


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    #f-contact .inner-wrap { padding: 50px 0; }

    #f-contact .contact-tel-block > div { text-align: center; }
    #f-contact .contact-tel-block > .contact-tel { margin-bottom: 5px; }

    #f-contact .contact-web-block .icon-line { width: 75px; }

    #f-contact .contact-web-block .icon-line > a { margin-bottom: 50px; }
}

/*----------- PC・タブレット ------------*/

@media (min-width:768px) {

    #f-contact .contact-tel-block > div { width: 48%; }

    #f-contact .contact-tel-block > .contact-tel { text-align: right; }

    #f-contact .contact-web-block .icon-line > a { margin-left: 2vw; }
}



/*======================================================
 ページトップ
========================================================*/

.glb-footer_pagetop { width: 70px; height: 70px; position: fixed; bottom: 50px; right: 5vw; z-index: 10; }

.glb-footer_pagetop a { background: #000; display: block; width: 50px; height: 50px; text-decoration: none; position: relative; transition: all 0.5s ease; }

.glb-footer_pagetop a:hover { background: #333; }

.arrow-top { border-top: solid 2px #FFF; border-left: solid 2px #FFF; width: 15px; height: 15px; transform: rotate(45deg); position: absolute; top: 22px; left: 18px; }




/*======================================================
　フッター
========================================================*/
footer { background: #272727; color: #272727; padding: 40px 0; }
footer .inner-wrap { padding: 70px 0 0px 0; }
.footer-wrap .footer-center a:hover { opacity: .7; }
footer .footer-head-wrap { width: 100%; display: flex; justify-content: center; align-items: stretch; margin-bottom: 60px; }
footer .footer-head-wrap a { color: #222; background: #fff; width: calc((70% / 2) - 10px); text-align: center; margin: 0 8px; padding-top: 2.65em; padding-bottom: 2.65em; }
footer .footer-head-wrap a:hover { background: #fff019; color: #222; }
footer .footer-head-wrap a span { display: block; font-size: 24px; font-weight: 100; letter-spacing: 4px; }
footer .footer-head-wrap a img { width: 30px; margin-bottom: 10px; }

footer .footer-body-wrap { color: #ccc; display: flex; justify-content: space-between; max-width: 980px; margin: 0 auto 50px; text-align: left; }

footer .footer-body-wrap a { color: #ccc; }

footer .footer-body-wrap .footer-left { width: 25%; }
footer .footer-body-wrap .footer-left span { display: block; }
footer .footer-body-wrap .footer-left .footer-logo { width: 200px; margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .comp-txt { margin-bottom: 5px; font-weight: 300; }
footer .footer-body-wrap .footer-left address { font-style: normal; font-weight: 300; letter-spacing: 1.5px; line-height: 1.4; margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .footer-btn-txt { display: inline-block; }
footer .footer-body-wrap .footer-left .footer-btn-txt i { margin-right: 0.6em; }
footer .footer-body-wrap .footer-left .footer-btn-txt span { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; margin-top: -3px; }
footer .footer-body-wrap .footer-center { display: flex; }
footer .footer-body-wrap .footer-center .footer-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: start; align-items: flex-start; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; overflow: hidden; }

footer .footer-body-wrap .footer-center .main-nav { margin-right: 10px; }

footer .footer-body-wrap .footer-center .footer-nav li { display: inline-block; margin: 0 0 0.5em; color: inherit; font-size: 13px; line-height: 2; vertical-align: middle; letter-spacing: .16em; }

footer .footer-body-wrap .footer-center .footer-nav .first { font-weight: 700; border-bottom: 1px solid #fff; }
footer .footer-body-wrap .footer-left .footer-tel .tel { display: flex; align-items: center; font-size: 24px; margin-bottom: 20px; letter-spacing: 3.6px; }
footer .footer-body-wrap .footer-left .footer-tel .tel img { width: 35px; padding-right: 10px; }
/*footer .footer-body-wrap .footer-right .footer-tel .tel:before {
    display: inline-block;
    content: "";
    background: url(../) 50%/contain no-repeat;
    width: 26px;
    height: 26px;
    text-indent: 0;
    letter-spacing: 0;
    vertical-align: -0.13em;
    margin-right: 14px;
}*/
footer .footer-body-wrap .footer-left .footer-time { font-size: 12px; font-weight: 300; letter-spacing: 1.5px; line-height: 1.8; margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .footer-nav-btn a { font-size: 1.7rem; color: #fff; background: transparent; border: 1px solid #fff; text-decoration: none; display: flex; text-align: center; padding: 13px 0; justify-content: center; align-items: center; }
footer .footer-body-wrap .footer-left .footer-nav-btn { margin-bottom: 20px; }
footer .footer-body-wrap .footer-left .footer-nav-btn a:hover { background: #fff; color: #222; }
footer .footer-body-wrap .footer-left .footer-nav-btn a span { letter-spacing: .16em; }
footer .footer-body-wrap .footer-left .footer-nav-btn a small { margin-left: 0.8em; }
footer .footer-body-wrap .footer-right .footer-tel .commendation { width: 250px; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .commendation-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box { width: calc((100% / 2) - 6px); }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box:last-child { width: 100%; margin-top: 10px; }
footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box img { width: 100%; }


@media(min-width:768px) {
    footer .footer-body-wrap .footer-left { width: 33%; }
    footer .footer-body-wrap .footer-center { width: 67%; }
    footer .footer-body-wrap .footer-center > ul { width: 50%; }
    .footer-bottom-wrap { max-width: 980px; margin: 0 auto; display: flex; justify-content: center; gap: 10px; }
    .footer-bottom-wrap > div { display: inline-block; }
    .footer-bottom-wrap img { max-height: 120px; }
}

@media(max-width:767px) {
    .footer-bottom-wrap { display: flex; overflow: hidden; flex-wrap: nowrap; }
    .footer-bottom-wrap.last > div { width: 25%; }
    /*.footer-bottom-wrap .c-box:last-child { width: 66%; }*/
}
/*---------- ユーティリティナビ -----------*/
footer .utility-navi-block { width: 100%; text-align: right; }

footer .utility-navi-block > ul { padding-bottom: 15px; }

footer .utility-navi-block > ul > li { padding-right: 10px; display: inline-block; }

footer .utility-navi-block > ul > li:last-child { padding-right: 0; }


/*--- アドレスエリア ---*/
footer .f-address-block .f-address { font-size: 1.6rem; line-height: 1.4em; letter-spacing: 1.2px; margin-bottom: 20px; }

footer .f-address-block .f-tel { font-size: 2.4rem; font-weight: bold; }
footer .f-address-block .f-tel .tel-l { font-size: 3.6rem; }


/*--- カレンダー ---*/
footer .calendar-wrap .calendar { max-width: 310px; height: 170px; background: #FFF; margin-bottom: 5px; color: #000; }


/*--- サイトマップ ---*/
footer .f-navi-block { justify-content: space-between; margin-bottom: 70px; }

footer .site-map-wrap { justify-content: space-around; }

footer .site-map-wrap ul { margin-bottom: 40px; }
footer .site-map-wrap ul:last-child { margin-bottom: 0; }

footer .site-map-wrap ul > li:first-child { margin-top: 0; }

footer .site-map-wrap ul > li.f-navi-ttl { padding-bottom: 3px; margin-bottom: 5px; font-weight: bold; border-bottom: solid 1px #FFF; }


/*--- 認証バナーエリア ---*/
footer .certification-bnr { max-width: 980px; margin: 0 auto; }

footer .certification-bnr .col3-box { margin-bottom: 20px; }

/*--- SNSアイコン ---*/
footer .sns-block { margin-top: 70px; text-align: center; }

footer .sns-block img { width: 35px; margin: 5px; }


/*--- copyright ---*/
footer .copyright { color: #fff; text-align: center; font-size: 1.2rem; padding: 15px 0; }


/*----------- タブレット縦　------------*/
@media screen and (max-width: 1024px) and (orientation: portrait) {
    footer .footer-body-wrap { padding: 0 10px; }
    footer .footer-body-wrap { flex-wrap: wrap; }
    footer .footer-body-wrap .footer-left .footer-logo { width: 170px; }
    footer .footer-body-wrap > div { width: 100%; justify-content: center; }
    footer .footer-body-wrap .footer-left { text-align: center; margin-bottom: 30px; }
    footer .footer-body-wrap .footer-right { text-align: center; }
    footer .footer-body-wrap .footer-right .footer-tel .tel { justify-content: center; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation { margin: 0 auto; width: 100%; }
    footer .footer-body-wrap .footer-right .footer-tel .footer-nav-btn a { width: 70%; margin: 0 auto; }
    footer .footer-body-wrap .footer-center { margin-bottom: 30px; }
}


/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {

    footer { padding-top: 20px; }

    footer .f-address-block .f-tel { font-size: 2.0rem; }
    footer .f-address-block .f-tel .tel-l { font-size: 3.0rem; }

    /*footer .f-navi-block .btn-block { margin:auto; }*/


}


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    /*--- アドレスエリア ---*/
    footer .f-address-block.c-box { margin-bottom: 50px; }

    /*--- カレンダー ---*/
    footer .calendar-wrap .calendar { margin-left: auto; margin-right: auto; }

    /*--- サイトマップ ---*/
    footer .site-map-wrap.c-box { text-align: left; margin-bottom: 70px; }

    /*--- 認証バナーエリア ---*/
    footer .certification-bnr { max-width: 100%; }

    footer .certification-bnr > .col2-box > .c-box > a > img { max-width: 200px; margin: auto; }

    footer .footer-wrap { margin: 0 10px; }
    footer .footer-head-wrap { margin-bottom: 30px; }
    footer .footer-head-wrap a { border-radius: 3px; width: 100%; padding-top: 1em; padding-bottom: 1em; font-size: 18px; }
    footer .footer-head-wrap a span { font-size: 18px; }
    footer .footer-body-wrap { flex-wrap: wrap; justify-content: center; }
    footer .footer-body-wrap .footer-left,
    footer .footer-body-wrap .footer-center,
    footer .footer-body-wrap .footer-right { width: 100%; text-align: center; }
    footer .footer-body-wrap .footer-left { border-bottom: 1px solid #fff; text-align: center; padding-bottom: 20px; margin-bottom: 20px; }
    footer .footer-body-wrap .footer-left .footer-logo { width: 150px; }
    footer .footer-body-wrap .footer-left .footer-tel .tel { justify-content: center; }
    footer .footer-body-wrap .footer-left .footer-tel .commendation { width: 100%; }

    footer .footer-body-wrap .footer-center { margin-bottom: 20px; }
    footer .footer-body-wrap .footer-center .footer-nav li { font-size: 10px; letter-spacing: 1px; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box { width: calc((70% / 3) - 16px); }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box img { width: 100%; }
    footer .footer-body-wrap .footer-right .footer-tel .commendation .c-box:last-child { width: 57%; margin: 0; }

    footer .footer-body-wrap .footer-center .footer-nav .first { white-space: nowrap; }
    footer .footer-body-wrap .footer-left .footer-nav-btn { width: 70%; margin: 0 auto; }

    /*--- ページトップに戻るボタン ---*/
    .glb-footer_pagetop a { height: 40px; width: 40px; }
    .arrow-top { top: 17px; left: 13px; }
}


footer .calendar-wrap .calendar { height: auto; }
footer .calendar .calendarcont { border-radius: 6px; position: relative; color: #383838; background: #fff; border: 1px solid #fff; padding: 2px }
footer .calendar .restday { background: #aaa; color: #fff; }
footer .calendar .today { color: #f00; }
footer .calendar .calendarlist { width: 100%; border-collapse: separate; border-spacing: 1px; }
footer .calendar .calendarlist td,
footer .calendar .calendarlist th { text-align: center; font-size: 15px; padding: 5px; }
footer .calendar .calendarlist .day { color: #aaa; }
footer .calendar .calendarcont i { width: 11px; height: 11px; display: inline-block; margin: 0 1px 0 5px; vertical-align: -10%; *display: inline; *zoom: 1; *vertical-align: le; }
footer .calendar .calendarcont p { margin: 2px 0px; border-top: 1px solid #aaa; padding-top: 4px; font-size: 14px; line-height: 1.2em; }
footer .calendar .calendarcont p span { color: #aaa; font-weight: bold; }



/* 下からふわっと現れる */
.fadeUp { -webkit-animation-name: fadeUpAnime; animation-name: fadeUpAnime; /*アニメーションの名前*/ -webkit-animation-duration: 1s; animation-duration: 1s; /*アニメーションの実行時間*/ -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/ }

@-webkit-keyframes fadeUpAnime {
    0% { opacity: 0; /*非表示*/ -webkit-transform: translateY(100px); transform: translateY(100px); /*縦方向に100pxずらす*/ }
    100% { opacity: 1; /*表示*/ -webkit-transform: translateY(0); transform: translateY(0); /*元の位置*/ }
}

@keyframes fadeUpAnime {
    0% { opacity: 0; /*非表示*/ -webkit-transform: translateY(100px); transform: translateY(100px); /*縦方向に100pxずらす*/ }
    100% { opacity: 1; /*表示*/ -webkit-transform: translateY(0); transform: translateY(0); /*元の位置*/ }
}

.fadeUpTrigger { opacity: 0; /*非表示*/ }