@charset "UTF-8";

/*
Theme Name: Sydney Child
Description: テーマ「Sydney」の子テーマ
Template: sydney
*/

:root {
    --header-height: 120px;
}

@font-face {
    font-family: 'icomoon';
    src: url('font/icomoon.eot?6f4hpf');
    src: url('font/icomoon.eot?6f4hpf#iefix') format('embedded-opentype'), url('font/icomoon.ttf?6f4hpf') format('truetype'), url('font/icomoon.woff?6f4hpf') format('woff'), url('font/icomoon.svg?6f4hpf#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-mail::before {
    content: "\e900";
}

body {
    font-family: "Noto Sans JP", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/
.entry-content {
    line-height: 180%;
    margin-top: -10px;
}

/*--------------------------------------------------------------
Repeatable Patterns
--------------------------------------------------------------*/
table {
    width: revert;
}

th,
td {
    border: revert;
    padding: revert;
    text-align: revert;
}

/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
.content-banner {
    padding: 0;
    margin: 0 auto;
    display: table;
    text-align: center;

}


#main h2 {
    clear: both;
    position: relative;
    font-size: 22px;
    color: aliceblue;
    padding: 10px 0px 10px 30px;
    background-color: #222;
}

#main h2::after {
    position: absolute;
    top: .5em;
    left: .5em;
    content: '';
    width: 8px;
    height: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    background-color: #3B88E2;
    border-radius: 4px;
}

#main h3 {
    clear: both;
    padding: 10px 0px 2px 15px;
    border: 1px solid #ccc;
    border-image: none;
    color: #333;
    line-height: 30px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    background-image: none;

}

#main h5 {
    clear: both;
    padding: 10px 0px 2px 0px;
    border-image: none;
    border: 0px;
    color: #333;
    line-height: 30px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;

}

#main h4 {
    position: relative;
    clear: both;
    padding: 8px 0px 6px 20px;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    background-color: #eeeeee;
    margin-bottom: 10px;
}

#main h4::after {
    position: absolute;
    top: .5em;
    left: .5em;
    content: '';
    width: 5px;
    height: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    background-color: #3B88E2;
    border-radius: 4px;
}

.box800 {
    width: 810px;
    clear: both;
}

/* Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 780px) {
    .box800 {
        width: auto;
        clear: both;
    }
}

/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
    .box_no_sp {
        display: none;
        visibility: hidden;
        color: #fff;
    }
}

/*************************************************************
【ボタン 青・緑】
*************************************************************/
a.button {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 0px 15px 0px;
    height: 34px;
    line-height: 35px;
    margin: 0 4px 4px 0;
    background: #008ece;
    display: inline-block;
    text-decoration: none;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, rgba(0, 216, 255, 1) 0%, rgba(0, 142, 206, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 216, 255, 1)), color-stop(100%, rgba(0, 142, 206, 1)));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d8ff', endColorstr='#008ece', GradientType=0);
    border: 1px solid #009de1;
    text-shadow: 1px 1px 0px #0085bf;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

a.button:hover {
    color: #fff;
    text-decoration: none;
    background: #0ddaff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ddaff', endColorstr='#0ddaff', GradientType=0);
}

a.button:active {
    box-shadow: none;
    bottom: -2px;
    position: relative;
}

.post a.button2 {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 0px 15px 0px;
    height: 34px;
    line-height: 35px;
    margin: 0 4px 4px 0;
    background: #36bf00;
    display: inline-block;
    text-decoration: none;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, rgba(65, 231, 0, 1) 0%, rgba(54, 191, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(65, 231, 0, 1)), color-stop(100%, rgba(54, 191, 0, 1)));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#41e700', endColorstr='#36bf00', GradientType=0);
    border: 1px solid #2da000;
    text-shadow: 1px 1px 0px #227a00;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

a.button2:hover {
    color: #fff;
    text-decoration: none;
    background: #7bf013;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bf013', endColorstr='#7bf013', GradientType=0);
}

a.button2:active {
    box-shadow: none;
    bottom: -2px;
    position: relative;
}

.morebutton {
    margin: 50px 5px 50px 5px;
    text-align: center;
}

a.button3 {
    background: #999;
    border-radius: 3px;
    color: #FFF;
    font-size: 14px;
    line-height: 100%;
    padding: 12px 16px;
    text-decoration: none;
}

a.button3:hover {
    color: #fff;
    background: #3F7985;
    text-decoration: none;
}

a.button_con {
    background: #999;
    border-radius: 8px;
    color: #FFF;
    font-size: 20px;
    line-height: 100%;
    padding: 16px 20px;
    text-decoration: none;
}

a.button_con:hover {
    color: #fff;
    background: #3F7985;
    text-decoration: none;
}


/**************************************************************
【画像位置】
**************************************************************/

img.aligncenter {
    display: block;
    margin: 5px auto;
}

img.alignright,
img.alignleft {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    margin: 0 7px 2px 0;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}


/**************************************************************
【background-colorの設定】
**************************************************************/
.bg-yellow {
    background: #ff0
}

/* 黄色の文字背景 */
.bg-blue {
    background: #4ab0f5
}

/* 青色の文字背景 */
.bg-red {
    background: red
}

/* 赤色の文字背景 */

/****************************************************************
【align 配置の設定】
*****************************************************************/
.align1 {
    text-align: center !important
}

/* 中央寄せ */
.align2 {
    text-align: right !important
}

/* 右寄せ */
.align3 {
    text-align: left !important
}

/* 左寄せ */

/****************************************************************
【float 回り込みの設定】
*****************************************************************/
.r-flo {
    float: right;
}

/* 右に回り込み */
.l-flo {
    float: left;
}

/* 左に回り込み */
.c-flo {
    margin: 0 auto;
}

/* 中央　幅指定必要width: 70%; */
.f-clear {
    clear: both
}

/* 回り込みの解除 */

/****************************************************************
【マウスオーバー時の画像リンク 不透明度の設定】※初期設定は60%
*****************************************************************/
a img.linkimg {
    background: none !important
}

a:hover img.linkimg {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    background: none !important;
}

a:hover img {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

/*************************************************************
【行間の設定】
*************************************************************/
.lh20 {
    line-height: 20px;
}

.lh21 {
    line-height: 21px;
}

.lh22 {
    line-height: 22px;
}

.lh23 {
    line-height: 23px;
}

.lh24 {
    line-height: 24px;
}

.lh25 {
    line-height: 25px;
}

.lh35 {
    line-height: 35px;
}

.lh50 {
    line-height: 50px;
}

/*************************************************************
【marginの設定】
*************************************************************/
.m0 {
    margin: 0 !important
}

/* margin 0px を指定するクラス */
.mt0 {
    margin-top: 0 !important
}

/* margin-top0px を指定するクラス */
.mr0 {
    margin-right: 0 !important
}

/* margin-right0px を指定するクラス*/
.mb0 {
    margin-bottom: 0 !important
}

/* margin-bottom0px を指定するクラス*/
.ml0 {
    margin-left: 0 !important
}

/* margin-left0px を指定するクラス*/

.m5 {
    margin: 5px !important
}

.mt5 {
    margin-top: 5px !important
}

.mr5 {
    margin-right: 5px !important
}

.mb5 {
    margin-bottom: 5px !important
}

.ml5 {
    margin-left: 5px !important
}

.m10 {
    margin: 10px !important
}

.mt10 {
    margin-top: 10px !important
}

.mr10 {
    margin-right: 10px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.ml10 {
    margin-left: 10px !important
}

.m15 {
    margin: 15px !important
}

.mt15 {
    margin-top: 15px !important
}

.mr15 {
    margin-right: 15px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.ml15 {
    margin-left: 15px !important
}

.m20 {
    margin: 20px !important
}

.mt20 {
    margin-top: 20px !important
}

.mr20 {
    margin-right: 20px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.ml20 {
    margin-left: 20px !important
}

.m25 {
    margin: 25px !important
}

.mt25 {
    margin-top: 25px !important
}

.mr25 {
    margin-right: 25px !important
}

.mb25 {
    margin-bottom: 25px !important
}

.ml25 {
    margin-left: 25px !important
}

.m30 {
    margin: 30px !important
}

.mt30 {
    margin-top: 30px !important
}

.mr30 {
    margin-right: 30px !important
}

.mb30 {
    margin-bottom: 30px !important
}

.ml30 {
    margin-left: 30px !important
}

.m35 {
    margin: 35px !important
}

.mt35 {
    margin-top: 35px !important
}

.mr35 {
    margin-right: 35px !important
}

.mb35 {
    margin-bottom: 35px !important
}

.ml35 {
    margin-left: 35px !important
}

.m40 {
    margin: 40px !important
}

.mt40 {
    margin-top: 40px !important
}

.mr40 {
    margin-right: 40px !important
}

.mb40 {
    margin-bottom: 40px !important
}

.ml40 {
    margin-left: 40px !important
}

.m45 {
    margin: 45px !important
}

.mt45 {
    margin-top: 45px !important
}

.mr45 {
    margin-right: 45px !important
}

.mb45 {
    margin-bottom: 45px !important
}

.ml45 {
    margin-left: 45px !important
}

.m50 {
    margin: 50px !important
}

.mt50 {
    margin-top: 50px !important
}

.mr50 {
    margin-right: 50px !important
}

.mb50 {
    margin-bottom: 50px !important
}

.ml50 {
    margin-left: 50px !important
}

.m55 {
    margin: 55px !important
}

.mt55 {
    margin-top: 55px !important
}

.mr55 {
    margin-right: 55px !important
}

.mb55 {
    margin-bottom: 55px !important
}

.ml55 {
    margin-left: 55px !important
}

.m60 {
    margin: 60px !important
}

.mt60 {
    margin-top: 60px !important
}

.mr60 {
    margin-right: 60px !important
}

.mb60 {
    margin-bottom: 60px !important
}

.ml60 {
    margin-left: 60px !important
}

.m65 {
    margin: 65px !important
}

.mt65 {
    margin-top: 65px !important
}

.mr65 {
    margin-right: 65px !important
}

.mb65 {
    margin-bottom: 65px !important
}

.ml65 {
    margin-left: 65px !important
}

.m70 {
    margin: 70px !important
}

.mr70 {
    margin-right: 70px !important
}

.mb70 {
    margin-bottom: 70px !important
}

.ml70 {
    margin-left: 70px !important
}

.m75 {
    margin: 75px !important
}

.mt75 {
    margin-top: 75px !important
}

.mr75 {
    margin-right: 75px !important
}

.mb75 {
    margin-bottom: 75px !important
}

.ml75 {
    margin-left: 75px !important
}

.m80 {
    margin: 80px !important
}

.mt80 {
    margin-top: 80px !important
}

.mr80 {
    margin-right: 80px !important
}

.mb80 {
    margin-bottom: 80px !important
}

.ml80 {
    margin-left: 80px !important
}

/**************************************************************
【paddingの設定】
**************************************************************/
.p0 {
    padding: 0 !important
}

/* padding-0px を指定するクラス */
.pt0 {
    padding-top: 0 !important
}

/* padding-top0px を指定するクラス */
.pr0 {
    padding-right: 0 !important
}

/* padding-right0px を指定するクラス */
.pb0 {
    padding-bottom: 0 !important
}

/* padding-bottom0px を指定するクラス */
.pl0 {
    padding-left: 0 !important
}

/* padding-left0px を指定するクラス */

.p5 {
    padding: 5px !important
}

.pt5 {
    padding-top: 5px !important
}

.pr5 {
    padding-right: 5px !important
}

.pb5 {
    padding-bottom: 5px !important
}

.pl5 {
    padding-left: 5px !important
}

.p10 {
    padding: 10px !important
}

.pt10 {
    padding-top: 10px !important
}

.pr10 {
    padding-right: 10px !important
}

.pb10 {
    padding-bottom: 10px !important
}

.pl10 {
    padding-left: 10px !important
}

/* contact page */
.wpcf7 {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 20px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.wpcf7 p {
    padding: 20px 20px 0;
    margin: 0;
    font-size: 11px;
}

.wpcf7 input,
.wpcf7 textarea {
    width: 97.5%;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
}

.wpcf7 textarea {
    height: 300px;
}

.wpcf7 input.wpcf7-submit {
    cursor: pointer;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    width: 200px;
    height: 40px;
    margin: 0 auto;
    display: block;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wpcf7 input.wpcf7-submit:hover {
    background: #e0e0e0;
}

.wpcf7-captchac {
    border: 1px solid #ccc;
}

.wpcf7-radio input,
.wpcf7-checkbox input {
    width: auto;
    border: none;
    padding: 0;
}

.wpcf7-radio span,
.wpcf7-checkbox span {
    margin: 0 20px 0 0;
    display: inline-block;
}

span.wpcf7-list-item-label {
    top: -2px;
    position: relative;
    display: inline-block;
}

div.wpcf7 img.ajax-loader {
    width: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px 0px 10px 0px;
}

td {
    border: 1px solid #cccccc;
    line-height: 160%;
    padding: 5px;
    margin: 0px;
    text-align: left;
}

th {
    background-color: #49567B;
    border: 1px solid #cccccc;
    color: #FFFFFF;
    line-height: 140%;
    padding: 5px;
    margin: 0px;
    text-align: center;
    font-weight: bold;
}

.t-line tr:nth-child(odd) td {
    background-color: #ffffff;
    padding: 10px 5px 10px 5px;
    font-size: 16px;
    border: 0px;
}

.t-line tr:nth-child(even) td {
    background-color: #EFEFEF;
    padding: 10px 5px 10px 5px;
    font-size: 16px;
    border: 0px;
}

table .none {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.none td {
    border: 0px;
    padding: 10px;
    margin: 0px;

}

table .none1 {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.none1 td {
    border: 0px;
    padding: 20px;
    margin: 0px 0px 0px 0px;
}


table .list01 {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 10px;

}

.list01 td {
    border: 1px solid #ccc;
    line-height: 140%;
    padding: 8px 5px 8px 8px;
    margin: 0px;
    text-align: left;
    vertical-align: middle;
}

.list01 th {
    border: 1px solid #ccc;
    color: #222;
    line-height: 140%;
    padding: 10px;
    margin: 0px;
    text-align: left;
    font-weight: bold;
    background-color: #ddd;
}

.list01d td {
    border-right: none;
    border-top: none;
    border-bottom: 1px dashed #ccc;
    border-left: none;
    padding: 5px 5px 5px 0px;
    text-align: left;
    margin: 0px;
    vertical-align: middle;
    /*middleは中央揃え*/
}


.list01d td img {
    vertical-align: middle;
    /*middleは中央揃え*/
}

.list01d ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.list01d li {
    border-right: none;
    border-top: none;
    border-bottom: 1px dashed #ddd;
    border-left: none;
    padding: 5px 3px 5px 0px;
    text-align: left;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

table .list02 {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 160%;
    margin: 0px 0px 10px 0px;
}

.list02 td {
    color: #333333;
    border: 1px solid #dddddd;
    line-height: 160%;
    padding: 20px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

.list02d td {
    border-right: none;
    border-top: none;
    border-bottom: 1px dashed #aaa;
    border-left: none;
    line-height: 160%;
    padding: 20px 10px 20px 0px;
    text-align: left;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

.list02 th {
    background-color: #eee;
    border: 1px solid #ccc;
    color: #333;
    font-size: small;
    padding: 20px;

    margin: 0px;
    font-weight: bold;
}


.box_sd {
    box-shadow: 2px 2px 5px 0px #2b91cb;
    -moz-box-shadow: 2px 2px 5px 0px #2b91cb;
    -webkit-box-shadow: 2px 2px 5px 0px #2b91cb;
    border-radius: 6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #cccccc;
    padding: 20px;
}

.box_sdg {

    box-shadow: 2px 2px 5px 0px #2b91cb;
    -moz-box-shadow: 2px 2px 5px 0px #2b91cb;
    -webkit-box-shadow: 2px 2px 5px 0px #2b91cb;
    border-radius: 6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #cccccc;
    padding: 20px;
    background-color: #eee;
}

.box_01 {
    border: 1px solid #dddddd;
    padding: 30px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    border-radius: 6px;
    /*画像の角を丸くする設定*/
    -webkit-box-shadow: 2px 4px 5px #bebebe;
    /*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
    box-shadow: 2px 4px 5px #bebebe;
    /*同上*/
    margin-bottom: 10px;
}

.border_g {
    border: 1px solid #dddddd;
    padding: 10px;
    background: url(images/bg01g.gif);
}

.border_b {
    border: 1px solid #dddddd;
    padding: 10px;
    background: url(images/bg01b.gif);
}

hr {
    clear: both;
    margin: 20px 0px 10px 0px;
    border-bottom: 1px solid #ddd;
    border-top: 0px solid #eee;
}

.wordh2 {
    display: none;
    visibility: hidden;
    color: #fff;
}

.pagetopup {
    text-align: right;
}

.grid10 {
    width: 100%;
    height: 125px;
    clear: both;
    border-bottom: 1px dashed #ccc;
    border-top: 1px solid #ccc;
    line-height: 130%;
    font-size: 14px;
    margin: 0px 20px 20px 0px;
    padding: 5px 0px;
}

.grid10 img {
    border: 1px solid #cccccc;
    margin: 0px 20px 0px 0px;
    padding: 2px;
}

.clear {
    clear: both;
}

p {
    margin: 0px;
    padding: 0px;
}

.site-header {
    background-color: black;
}

.pageBanners {
    text-align: center;
    display: grid;
    width: fit-content;
    margin: 20px auto;
}

@media only screen and (min-width: 768px) {
    .pageBanners {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.sydney-hero-area-after {
    background-color: #3a87e1;
    margin-top: 120px;
}

@media only screen and (max-width: 1024px) {
    .sydney-hero-area-after {
        margin-top: 0;
    }
}

.i-blk {
    display: inline-block;
}

.sr-only {
    white-space: nowrap;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .btn-menu {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 767px) {
    #mainnav-mobi {
        width: 60vw;
        right: 0;
    }
}

/************************************************
    Page
*************************************************/
.page {
    padding-top: 120px;
    padding-top: var(--header-height);
}

@media only screen and (max-width: 1024px) {
    .page {
        padding-top: 0;
    }
}

.page__title {
    color: white;
    font-size: 16px;
    line-height: 1.3125;
    text-align: center;
    background: url('images/page__title.jpg') no-repeat center / cover;
    padding: 15.6640625em 1.25em 16.9140625em;
    margin: 0;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .page__title {
        font-size: 10px;
    }
}

.page__title .text {
    font-family: "Roboto", sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 0.25em;
    display: block;
    -webkit-padding-start: 0.25em;
    padding-inline-start: 0.25em;
    position: relative;
    z-index: 2;
}

.page__title .after {
    font-size: 1.25em;
    font-weight: 500;
    display: block;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
    position: relative;
    z-index: 2;
}

.page__title::before {
    content: "";
    display: block;
    background: url('images/dot.svg') repeat center / 4px 4px;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
}

.page-id-15 .page-wrap .container,
.page-id-21 .page-wrap .container {
    max-width: 835px;
}

.page__content {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5625;
    max-width: 53.55em;
    margin: 0 auto 0;
}

/************************************************
    heading
*************************************************/
.heading {
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

@media (min-width: 48rem) {
    .heading {
        font-size: 16px;
    }
}

.page__title + .heading {
    margin-top: 8.75em;
}

.breadcrumb + .heading {
    margin-top: 8.75em;
}

.heading .text {
    font-family: "Roboto", sans-serif;
    font-size: 1.875em;
    letter-spacing: 0.25em;
    display: block;
    -webkit-padding-start: 0.25em;
    padding-inline-start: 0.25em;
}

.heading .after {
    font-size: 0.875em;
    font-weight: 500;
    letter-spacing: 0.15em;
    display: block;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
}

.heading::after {
    content: "";
    display: block;
    background-color: currentColor;
    inline-size: 0.125em;
    block-size: 2.5em;
    -webkit-margin-before: 1.125em;
    margin-block-start: 1.125em;
    margin-inline: auto;
}

@supports not (margin-inline: auto) {
    .heading::after {
        -webkit-margin-start: auto;
        margin-inline-start: auto;
        -webkit-margin-end: auto;
        margin-inline-end: auto;
    }
}

/************************************************
    Section
*************************************************/
.section {
    font-size: 14px;
    padding-right: 20px;
    padding-left: 20px;
}

@media (min-width: 48rem) {
    .section {
        font-size: 16px;
    }
}

/************************************************
    CONTACT
*************************************************/
.section-Contact {
    color: white;
    background-color: #2e2e2e;
    padding-top: 4.6875em;
    padding-bottom: 3.4375em;
    position: relative;
}

@media (min-width: 56.25rem) {
    .section-Contact {
        padding-top: 8.875em;
        padding-bottom: 4.375em;
    }
}

.section-Contact::before,
.section-Contact::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.section-Contact::before {
    background: url('images/section-Contact.jpg') no-repeat center / cover;
    opacity: 0.15;
}

.section-Contact::after {
    background: url('images/dot.svg') repeat center / 4px 4px;
    opacity: 0.4;
}

.section-Contact .heading {
    color: inherit;
    margin-top: -0.775em;
    position: relative;
    z-index: 2;
}

.section-Contact__content {
    font-size: 1.125em;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 2.1111111111;
    text-align: center;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
    margin-top: 3.1111111111em;
    position: relative;
    z-index: 2;
}

.section-Contact__content p {
    margin: 0;
}

.section-Contact-contact {
    list-style: none;
    text-align: center;
    flex: 1;
    box-sizing: content-box;
    max-width: 29.6875em;
    padding: 0.625em;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

@media (min-width: 56.25rem) {
    .section-Contact-contact {
        padding: 1.5625em;
        margin-right: 0;
        margin-left: 0;
    }
}

.section-Contact-contact a {
    color: white;
    text-decoration: none;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid white;
}

.section-Contact-contact a:hover {
    background-color: black;
}

.section-Contact-contact--Mail a {
    padding-top: 3.3375em;
    padding-bottom: 3.3375em;
}

.section-Contact-contact--Mail a::before {
    content: '\e900';
    font-family: 'icomoon';
    font-size: 3em;
    line-height: 1;
}

.section-Contact-contact__content {
    font-size: 1.125em;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 2.1111111111;
    text-align: center;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
}

.section-Contact-contact--TEL {
    line-height: 1.65;
}

.section-Contact-contact--TEL a {
    padding-top: 3.75625em;
    padding-bottom: 4.19375em;
}

.section-Contact-contact--TEL .number {
    font-family: "Roboto", sans-serif;
    font-size: 1.625em;
    font-weight: 500;
    letter-spacing: 0.2em;
    display: block;
    -webkit-padding-start: 0.2em;
    padding-inline-start: 0.2em;
}

.section-Contact-contact--TEL .time {
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.15em;
    display: block;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
}

.section-Contact-contact--TEL .time .hours {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

.section-Contact-contacts {
    padding: 0.625em;
    margin-top: 0.3125em;
    margin-bottom: 0;
}

@media (min-width: 56.25rem) {
    .section-Contact-contacts {
        -js-display: flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1.5625em;
    }
}

.section .section-Contact-contacts {
    margin-right: -20px;
    margin-left: -20px;
}

/************************************************
    CONCEPT
*************************************************/
.section-Concept {
    padding-top: 4.6875em;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

@media (min-width: 75rem) {
    .section-Concept {
        display: grid;
        grid-template-columns: 1fr repeat(2, minmax(min-content, 37.5em)) 1fr;
        grid-template-rows: repeat(4, auto) 1fr;
    }
}

@media (min-width: 75rem) {
    .section-Concept .heading {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

.section-Concept__thumbnail {
    display: block;
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 75rem) {
    .section-Concept__thumbnail {
        grid-column: 1 / 3;
        grid-row: 2 / -1;
        width: calc(100% + 20px);
        max-width: none;
        margin-left: -20px;
    }
}

.section-Concept__2ndTitle {
    font-size: 1.375em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: center;
    -webkit-padding-start: 0.1em;
    padding-inline-start: 0.1em;
    margin-top: 2em;
    margin-bottom: 0;
}

@media (min-width: 75rem) {
    .section-Concept__2ndTitle {
        grid-column: 3;
        grid-row: 2;
        margin-top: 3.3333333333em;
    }
}

.section-Concept__content {
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.875;
    max-width: 30em;
    margin-top: 1.75em;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 75rem) {
    .section-Concept__content {
        grid-column: 3;
        grid-row: 3;
    }
}

.section-Concept__content p {
    margin: 0;
}

.section-Concept__button {
    color: inherit;
    font-size: 1.25em;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    width: fit-content;
    min-width: 15.5em;
    padding: 0.75em 1em 0.75em 1.1em;
    border: 1px solid black;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

@media (min-width: 75rem) {
    .section-Concept__button {
        grid-column: 3;
        justify-self: start;
        align-self: start;
    }
    .section-Concept__button:first-of-type {
        grid-row: 4;
    }
    .section-Concept__button:nth-of-type(2) {
        grid-row: 5;
    }
}

.section-Concept__button:hover {
    color: white;
    background-color: black;
}

.section-Concept__content + .section-Concept__button {
    margin-top: 1.75em;
}

.section-Concept__button + .section-Concept__button {
    margin-top: 0.75em;
}

.section-Concept__button::after {
    content: '';
    display: block;
    background-color: black;
    width: 2em;
    height: 1px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

/************************************************
    SERVICE
*************************************************/
.section-Service {
    padding-top: 8.875em;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.section-Service__title {
    font-size: 1em;
    line-height: 2;
    text-align: center;
    margin: 0;
}

.section-Service__title .text {
    font-size: 2.5em;
    letter-spacing: 0.1em;
    display: block;
    -webkit-padding-start: 0.1em;
    padding-inline-start: 0.1em;
}

.section-Service__title .after {
    font-size: 1.125em;
    letter-spacing: 0.1em;
    display: block;
    -webkit-padding-start: 0.1em;
    padding-inline-start: 0.1em;
}

.section-Service__content {
    font-size: 1.125em;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.75;
    width: fit-content;
    -webkit-padding-start: 0.1em;
    padding-inline-start: 0.1em;
    margin-top: 3.4375em;
    margin-right: auto;
    margin-left: auto;
}

.section-Service__content p {
    margin: 0;
}

.section-Service-services {
    padding: 0;
    margin: 2.8125em -20px 0;
}

@media (min-width: 48rem) {
    .section-Service-services {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.section-Service-service {
    font-size: 1.875em;
    font-weight: 500;
    line-height: 1.6666666667;
    list-style: none;
    text-align: center;
    background: no-repeat center / cover;
}

.section-Service-service--works {
    background-image: url('images/section-Service-service--works.jpg');
}

.section-Service-service--worksworks {
    background-image: url('images/section-Service-service--worksworks.jpg');
}

.section-Service-service--results {
    background-image: url('images/section-Service-service--results.jpg');
}

.section-Service-service a {
    color: white;
    display: grid;
    place-items: center;
    background-color: rgba(46, 46, 46, 0.5);
    box-sizing: content-box;
    min-height: 3.33333em;
    padding: 3em 1em;
    position: relative;
}

@media (min-width: 48rem) {
    .section-Service-service a {
        padding-top: 9em;
        padding-bottom: 9em;
    }
}

.section-Service-service a:hover {
    background-color: rgba(46, 46, 46, 0.1);
}

.section-Service-service a::after {
    content: '';
    display: block;
    background: url('images/dot.svg') repeat center / 4px 4px;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
}

.section-Service-service a:hover::after {
    opacity: 0;
}

.section-Service-service .text {
    display: block;
    position: relative;
    z-index: 2;
}

/************************************************
    Introduction
*************************************************/
.section-Introduction {
    padding-top: 4.6875em;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

@media (min-width: 48rem) {
    .section-Introduction {
        padding-top: 8.875em;
    }
}

.section-Introduction-navigation {
    padding: 0;
    margin: 3.75em -20px 0;
}

@media (min-width: 48rem) {
    .section-Introduction-navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.section-Introduction-navigation-item {
    list-style: none;
    background: no-repeat center / cover;
}

.section-Introduction-navigation-item--voice {
    background-image: url('images/section-Introduction-navigation-item--voice.jpg');
}

.section-Introduction-navigation-item--recruit {
    background-image: url('images/section-Introduction-navigation-item--recruit.jpg');
}

.section-Introduction-navigation-item a {
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 3em 20px;
}

@media (min-width: 48rem) {
    .section-Introduction-navigation-item a {
        padding-top: 10.625em;
        padding-bottom: 10.625em;
    }
}

.section-Introduction-navigation-item a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.section-Introduction-navigation-item__title {
    color: white;
    font-size: 1em;
    line-height: 1.2222222222;
    text-align: center;
    display: block;
    background-color: rgba(43, 43, 43, 0.8);
    box-sizing: border-box;
    width: 18.75em;
    padding: 8.5625em 1.375em 7.4375em;
    border-radius: 50%;
}

.section-Introduction-navigation-item__title .text {
    font-family: "Roboto", sans-serif;
    font-size: 1.375em;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    -webkit-padding-start: 0.05em;
    padding-inline-start: 0.05em;
}

.section-Introduction-navigation-item__title .after {
    font-size: 0.875em;
    font-weight: 500;
    letter-spacing: 0.15em;
    display: block;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
}

/************************************************
    Feature
*************************************************/
.features {
    padding: 0;
    margin: 0 calc(50% - 50vw);
}

.feature {
    font-size: 14px;
}

@media (min-width: 48rem) {
    .feature {
        font-size: 16px;
        display: grid;
        grid-template-columns: 1fr repeat(2, minmax(min-content, 640px)) 1fr;
        grid-template-rows: auto;
    }
}

.feature + .feature {
    margin-top: 5em;
}

@media (min-width: 48rem) {
    .feature__thumbnail {
        grid-row: 1;
    }
}

@media (min-width: 48rem) {
    .feature:nth-of-type(odd) .feature__thumbnail {
        grid-column: 3 / 5;
    }
}

@media (min-width: 48rem) {
    .feature:nth-of-type(even) .feature__thumbnail {
        grid-column: 1 / 3;
    }
}

.feature-contents {
    background-color: white;
    box-sizing: border-box;
    padding: 60px 20px;
}

@media (min-width: 48rem) {
    .feature-contents {
        grid-row: 1;
        align-self: center;
        padding-right: 40px;
        padding-left: 40px;
    }
}

@media (min-width: 48rem) {
    .feature:nth-of-type(odd) .feature-contents {
        grid-column: 2;
        justify-self: end;
        transform: translateX(100px);
    }
}

@media (min-width: 48rem) {
    .feature:nth-of-type(even) .feature-contents {
        grid-column: 3;
        justify-self: start;
        transform: translateX(-100px);
    }
}

.feature__title {
    font-size: 1.375em;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-align: center;
    -webkit-padding-start: 0.15em;
    padding-inline-start: 0.15em;
    margin: 0;
}

.feature__content {
    font-size: 0.875em;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-top: 2em;
}

.feature__button {
    color: inherit;
    font-size: 1.25em;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    width: fit-content;
    min-width: 15.5em;
    padding: 0.75em 1em 0.75em 1.1em;
    border: 1px solid black;
    margin-top: -1em;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

@media (min-width: 48rem) {
    .feature__button {
        grid-row: 1;
        justify-self: center;
    }
}

@media (min-width: 48rem) {
    .feature:nth-of-type(even) .feature__button {
        grid-column: 3;
        align-self: end;
        transform: translateX(-100px);
    }
}

.feature__button:hover {
    color: white;
    background-color: black;
}

.feature__button::after {
    content: '';
    display: block;
    background-color: black;
    width: 2em;
    height: 1px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}