@charset "UTF-8";
/*
    Template: swell
    Theme Name: hidaken
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


@import url("./css/page.css");


/*スマホ（641px以下）*/
@media screen and (max-width:641px){
	.pc{display: none!important;}
	.tablet{display: none!important;} 
}
/*タブレット（641px〜1024pxまで）*/
@media screen and (min-width:641px) and (max-width:1024px){
	.pc{display: none!important;} 
	.smp{display: none!important;}
}
/*pc（1025px以上）*/
@media screen and (min-width:1025px){
.smp{display: none!important;} 
.tablet{display: none!important;}
}

/*ipadを横にした時だけの設定*/
@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){}


/* 画面上からは完全に消すが、検索エンジンには読ませる魔法のクラス */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.cf:before,.cf:after{content:"";display:block;overflow:hidden;}
.cf:after{clear:both;}
.cf{zoom:1;}


body {font-family: "Meiryo", "メイリオ", sans-serif !important;}

.shippori{font-family: "Shippori Mincho", serif; font-weight: 600!important;}



/*-------------------------------------------
    fadeinアニメーション
-------------------------------------------*/

/* --- ふわっとフェードインさせる共通クラス --- */
.fuwa-fadein {
  opacity: 0;
  transform: translateY(20px); /* 20px下からスッと上がる */
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}

/* --- 画面に入って is-active が付与された時の状態 --- */
.fuwa-fadein.is-active {
  opacity: 1;
  transform: translateY(0); /* 定位置に戻る */
}



/*-------------------------------------------
    header
-------------------------------------------*/

.l-header__bar{display: none;}

.l-header__logo{display: block!important; padding: 22px 0!important;}
.l-header__right{text-align: right; padding: 10px 0;}
.l-header__right a{color: #fff; letter-spacing: 0.03em;}
.l-header__right .icon-tel{font-size: 29px; font-weight: bold;}
.l-header__right .icon-tel img{width: 25px; margin-right: 8px; vertical-align: center;}
.l-header__right .icon-envelop{font-size: 17px; font-weight: bold;}
.l-header__right .icon-envelop img{width: 20px; margin-right: 9px; vertical-align: center;}

.c-gnav {justify-content: right; margin: 20px 0;}
.c-gnav a {color: #fff!important; padding: 0 19px!important;}
.c-gnav .ttl{font-size: 16px!important;}

.l-header__gnav .c-gnav a {color: #fff!important; padding: 0 19px 15px!important;}

.l-fixHeader__gnav .c-gnav{margin: 0;}
.l-fixHeader__gnav .c-gnav a{color: #0d6ea1!important;}
.l-fixHeader__gnav .c-gnav .ttl{font-size: 13px !important;}



@media screen and (max-width:641px){
    .l-header {height: 55.73px;}
    .l-header__logo {padding: 9px 0 !important;}
    .l-header__menuBtn{position: absolute; top: 10px; right: 10px; z-index: 1;}
    .top .c-iconBtn{color: #fff!important;}
    .c-iconBtn__icon {font-size: 34px!important;}
    
    .top #fix_header {
        display: block !important;
        z-index: 999 !important; /* ★スマホメニューよりも背面に下げる */
    }

    /* 追従ヘッダー内のPC用グローバルナビ（横並びメニュー）を非表示 */
    #fix_header .l-fixHeader__gnav {
        display: none !important;
    }
    
    /* 追従ヘッダー内のレイアウト（横並びにして中央揃え） */
    #fix_header .l-fixHeader__inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 16px !important; /* スマホ向けに余白調整 */
    }

    /* 追加したハンバーガーメニューのレイアウト調整 */
    #fix_header .l-header__menuBtn {
        z-index: auto !important; /* ★先ほどの高い数値をリセット */
        pointer-events: auto !important;
    }
    
    /* SWELLデフォルトのロゴ幅調整（スマホではロゴが大きくなりすぎないように） */
    #fix_header .l-fixHeader__logo img {
        max-width: 150px !important;
        height: auto !important;
    }
    
    #fix_header .c-iconBtn{color: #0d6ea1!important;}
    
    
    
    .p-spMenu{z-index: 1000;}
    .p-spMenu__closeBtn .c-iconBtn__icon {font-size: 20px !important;}
    
    
    .c-widget__title.-spmenu{display: none;}
    .-right .p-spMenu__closeBtn {right: 5px; top: 10px;}
    .p-spMenu__inner{padding-top: 100px!important;}
    .p-spMenu__inner::before {background: #0d6ea1!important;}
    .c-listMenu a{color: #fff; padding: 1.5em 1em 1.5em 1.75em;}

}


@media screen and (min-width:641px) and (max-width:1024px){
    .l-header {height: 65.73px;}
    .l-header__logo {padding: 10px 0 !important;}
    .l-header__menuBtn{position: absolute; top: 10px; right: 10px; z-index: 1;}
    .top .c-iconBtn{color: #fff!important;}
    .c-iconBtn__icon {font-size: 34px!important;}
    
    #fix_header {
        display: block !important;
        z-index: 999 !important; /* ★スマホメニューよりも背面に下げる */
    }

    /* 追従ヘッダー内のPC用グローバルナビ（横並びメニュー）を非表示 */
    #fix_header .l-fixHeader__gnav {
        display: none !important;
    }
    
    /* 追従ヘッダー内のレイアウト（横並びにして中央揃え） */
    #fix_header .l-fixHeader__inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 16px !important; /* スマホ向けに余白調整 */
    }

    /* 追加したハンバーガーメニューのレイアウト調整 */
    #fix_header .l-header__menuBtn {
        z-index: auto !important; /* ★先ほどの高い数値をリセット */
        pointer-events: auto !important;
    }
    
    /* SWELLデフォルトのロゴ幅調整（スマホではロゴが大きくなりすぎないように） */
    #fix_header .l-fixHeader__logo img {
        max-width: 150px !important;
        height: auto !important;
    }
    
    #fix_header .c-iconBtn{color: #0d6ea1!important;}
    
    
    
    .p-spMenu{z-index: 1000;}
    .p-spMenu__closeBtn .c-iconBtn__icon {font-size: 20px !important;}
    
    
    .c-widget__title.-spmenu{display: none;}
    .-right .p-spMenu__closeBtn {right: 5px; top: 10px;}
    .p-spMenu__inner{padding-top: 100px!important;}
    .p-spMenu__inner::before {background: #0d6ea1!important;}
    .c-listMenu a{color: #fff; padding: 1.5em 1em 1.5em 1.75em;}
}


@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){
    .-series .c-headLogo {max-width: 250px;}
    .l-header__right{display: block!important;}
    
    #fix_header .l-fixHeader__gnav {
        display: block!important;
    }
    
}

/*-------------------------------------------
    footer
-------------------------------------------*/
.l-footer{padding: 4em 6% 3em;}
.f-left{float: left; width: 30%;}
.f-left .comName{font-size: 18px; margin-bottom: 20px; }
.f-left .add{font-size: 15px;}
.f-right{float: right; width: 65%;}
.f-right ul {
    display: flex;
    justify-content: right;
    gap: 5%;
    margin-bottom: 20px;
}
.f-right ul li a{display: block; font-size: 14px;}
.sp-menu{display: none;}
.copy{text-align: center; font-size: 12px; padding-top: 6em;} 



@media screen and (max-width: 641px) {
    .l-footer{padding: 2em 5% 1.5em;}
    .f-left {float: none; width: 100%;}
    .f-left .comName{font-size: 16px; text-align: center;}
    .f-left .add{display: none;}
    .f-right {display: none;}
    .sp-menu{display: flex; justify-content: center; padding-top: 20px;}
    .sp-menu li:first-child a{border-right: 1px solid #fff;}
    .sp-menu a{font-size: 12px; padding: 0 15px;}
    .copy{font-size: 10px;}
}


@media screen and (min-width:641px) and (max-width:1024px){
    .l-footer{padding: 2em 5% 1.5em;}
    .f-left {float: none; width: 100%;}
    .f-left .comName{font-size: 16px; text-align: center;}
    .f-left .add{display: none;}
    .f-right {display: none;}
    .sp-menu{display: flex; justify-content: center; padding-top: 20px;}
    .sp-menu li:first-child a{border-right: 1px solid #fff;}
    .sp-menu a{font-size: 12px; padding: 0 15px;}
    .copy{font-size: 10px;}
}

/*-------------------------------------------
    top
-------------------------------------------*/

.l-content{margin: 0 auto;}

.first-area{
    background-image: url("img/first-bg.png");
    background-repeat: no-repeat;
    background-position: right top -50px;
    background-size: auto;
}
.top-h1{
    font-size: clamp(35px,3.5vw,53px)!important;
    margin-bottom: 0.5em;
}
.first-txt{
    font-size: 18px;
    line-height: 2.0em;
}



@media screen and (max-width:641px){
    .first-area{
        padding-top: 0!important; 
        padding-bottom: 15em !important;
        background-position: center bottom;
        background-size: 650px;        
    }
    .top-h1{text-align: center!important;}
    .first-txt {font-size: 16px;}
}

@media screen and (min-width:641px) and (max-width:1024px){
    .first-area{
        padding-top: 0!important; 
        padding-bottom: 15em !important;
        background-position: right bottom;
        background-size: auto;        
    }
     .first-txt {font-size: 16px;}
}

@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){
    .first-area{
        padding-bottom: 8em !important;
        background-position: right bottom; 
        background-size: contain;
    }
}

/*-----コンセプト-----*/

.concept-area{
    padding-bottom: 24em!important;
    background-image: url("img/house-bg.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.concept-area .l-article{
    max-width: none!important;
}
.concept-area .swell-block-fullWide__inner{
    padding: 0 0!important;
}
.custom-concept-wrap {
    display: flex;
    align-items: flex-start; /* 上で揃える */
    margin: 0 auto 60px; /* 中央寄せと下部の余白 */
}

/* 左側の画像エリア */
.custom-concept-img {
    width: 45%; /* 画像の幅 */
    position: relative;
    z-index: 1; /* 後ろに配置 */
}

.custom-concept-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    vertical-align: bottom; /* 画像の下の隙間を消す */
}

/* 右側のテキストボックスエリア */
.custom-concept-box {
    width: 65%; /* テキストボックスの幅 */
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
    padding: 5em 6em 5em 4em; /* 内側の余白（上下60px、左右50px） */
    margin-left: -10%; /* ★ここでマイナス指定をして画像の上に被せる */
    margin-top: 100px; /* ★上から少し下げる */
    position: relative;
    z-index: 2; /* 画像より手前に配置 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* ふわっとした影 */
    box-sizing: border-box;
}

/* ==================================
   テキストの装飾（SWELLのデフォルトを上書き）
================================== */
.custom-concept-en {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    position: absolute; /* ボックスを基準に自由に動かせるようにする */
    top: 0; /* ボックスの一番上の線を基準にする */
    right: 50px; /* ボックスの左側の余白(padding)と同じ数値にする */
    transform: translateY(-50%); /* ★自分の高さの半分(50%)だけ上に突き出させる */
    font-size: clamp(80px,8.0vw,100px); 
    color: rgba(13,110,161,0.20); 
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: bold;
    margin: 0; /* 位置を絶対指定にするのでmarginはゼロに */
    background: #fff;
}

.custom-concept-ja {
    font-size: clamp(27px,2.7vw,37px)!important;
    font-weight: 500!important;
    color: #0d6ea1!important; /* 濃いブルー */
    margin: 0 0 50px !important;
    padding: 0 !important;
    border: none !important; /* SWELLの見出し装飾を無効化 */
    background: transparent !important;
}
.custom-concept-ja::before{
    display: none!important;
}

.custom-concept-text p {
    line-height: 2; /* 行間を広めにとって読みやすく */
    color: #444444;
    margin-bottom: 1.5em !important;
}

/* ==================================
   スマホ表示用（画面幅767px以下）
================================== */

@media screen and (max-width: 641px) {
    
    .concept-area {
        padding-bottom: 8em !important;
}
    
    
    .custom-concept-wrap {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央寄せ */
    }

    .custom-concept-img {
        width: 100%; /* スマホでは画像幅100% */
    }

    .custom-concept-box {
        background: #fff;
        width: 90%; /* 両端に少し隙間を空ける */
        padding: 100px 20px 20px;
        margin-left: 0; /* 横の重なりを解除 */
        margin-top: -70px; /* ★スマホでは縦方向に少し上に被せる */
    }
    .cuttom-concept-inner{
        transform: translateY(-45px);
    }
    .custom-concept-en {
        width: 100%;
        text-align: center;
        font-size: 50px;
        top: 54px;
        left: 50%; /* ★スマホ時はボックスの余白が20pxなので、それに合わせる */
        transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

    }
    
    .custom-concept-ja {
        font-size: 27px !important;
        text-align: center;
        margin: 0 0 37px !important;
    }
    .custom-concept-text p {line-height: 1.8em; }
}


@media screen and (min-width:641px) and (max-width:1024px){
    .concept-area {
        padding-bottom: 14em !important;
}
    
    .custom-concept-wrap {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央寄せ */
    }

    .custom-concept-img {
        width: 100%; /* スマホでは画像幅100% */
    }

    .custom-concept-box {
        background: #fff;
        width: 90%; /* 両端に少し隙間を空ける */
        padding: 100px 20px 20px;
        margin-left: 0; /* 横の重なりを解除 */
        margin-top: -300px; /* ★スマホでは縦方向に少し上に被せる */
    }
    .cuttom-concept-inner{
        transform: translateY(-45px);
    }
    .custom-concept-en {
        width: 100%;
        text-align: center;
        font-size: 50px;
        top: 54px;
        left: 50%; /* ★スマホ時はボックスの余白が20pxなので、それに合わせる */
        transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

    }
    
    .custom-concept-ja {
        font-size: 27px !important;
        text-align: center;
        margin: 0 0 37px !important;
    }
    .custom-concept-text p {line-height: 1.8em; }
}


@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){
    .custom-concept-wrap {
        display: flex;
        align-items: flex-start;
         flex-direction: initial;
    }
    .custom-concept-img {width: 50%;}
    .custom-concept-box {
        width: 65%;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
        padding: 5em 2em 5em 2em;
        margin-left: -10%;
        margin-top: 44px;
        position: relative;
        z-index: 2;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }
}

/*-----青いbox-----*/

.twobox-area{
    padding-bottom: 26em !important;
    background-image: url("img/house-bg.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}
.twobox-area .wp-block-columns{
    gap: 4em !important;
}
.twobox-area .wp-block-column {
    border-radius: 20px;
    padding: 2.5em 2.5em;
}
.twobox-area h3{
    font-size: clamp(25px,2.5vw,29px)!important;
    margin: 1.5em 0 1em!important;
}
.twobox-area h3::before{
    display: none!important;
}
.twobox-area p{
    font-size: 17px;
    font-weight: bold;
    line-height: 2.2em;
}


@media screen and (max-width:641px){
    .twobox-area {padding-bottom: 8em !important;}
    .twobox-area .wp-block-column {padding: 1.5em 1.5em;}
    .twobox-area img{width: 70px!important; height: auto!important;}
    .twobox-area h3 {margin: 1.2em 0 0.5em !important;}
    .twobox-area p {font-size: 16px; font-weight: normal;}
}

@media screen and (min-width:641px) and (max-width:1024px){
    .twobox-area {padding-bottom: 12em !important;}
    .twobox-area .wp-block-columns {gap: 1em !important;}
    .twobox-area .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis: 0!important;}
    .twobox-area .wp-block-column{flex: 1!important; padding: 1.5em 1.5em;}
    .twobox-area img{height: 62px!important; width: auto!important;}
    .twobox-area h3{font-size: 22px!important; margin: 1.2em 0 0.5em !important;}
    .twobox-area p {font-size: 16px; font-weight: normal;}
}


/*-----施工事例-----*/


.works-area{
    background-image: linear-gradient(to bottom, rgba(13, 110, 161, 0.15) 0%, rgba(255, 255, 255, 1) 100%), url("img/works-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.top-h2{
    font-size: clamp(35px,3.5vw,55px)!important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.5em!important;
}
.top-en{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.07em;
}
.works-outer .wp-block-column{
    padding: 0 0 4em !important;
}
.works-tab.is-style-default > .c-tabList .c-tabList__button {
    background: #e6e6e6!important;
    color:#cccccc!important;
    opacity: 1;
    padding-top: 0.8em;
}
.works-tab.is-style-default > .c-tabList .c-tabList__button:hover, .is-style-default > .c-tabList .c-tabList__button[aria-selected="true"] {
    background-color: #0d6ea1!important;
    color: #fff!important;
}

.c-tabList__button {
    font-size: 25px;
  } 
.is-style-default .c-tabBody{
    border: none!important;
    background: #fff;
    padding: 4em 3em 0;
}
.works-tab .p-postList__item{
    margin-bottom: 1.5em;
}
.-type-card .p-postList__thumb {
  height: 250px;
}
.c-postThumb__figure{
    height: 100%;
}
.w-btn a{padding: 1.0em 0.5em!important;}


@media screen and (max-width:641px){
    .top-h2{text-align: center!important;}
    .top-en{text-align: center!important; font-size: 16px;}
    .works-outer .wp-block-column {padding: 0 0 0 !important;}
    .c-tabList__button {font-size: 19px;}
    .is-style-default .c-tabBody {padding: 2em 1.5em 1em;}
    .works-tab .p-postList__item:nth-child(n+2){display: none!important;}
}

@media screen and (min-width:641px) and (max-width:1024px){
    .works-outer .wp-block-column{padding: 0 0 2em !important;}
    .c-tabList__button {font-size: 18px;}
    .is-style-default .c-tabBody {padding: 2.5em 2.0em 1em;}
    .works-tab .p-postList__item:nth-child(n+3){display: none!important;}
}



/*-----お客様の声-----*/


.voice-area .voice-outer{
    gap: 5%!important;
}

.voice-area .v-left{
    position: relative;
}
.voice-area .v-btn{
    position: absolute;
    left: 0;
    bottom: 35%;
}
.voice-area .v-btn a{padding: 1.0em 0.5em!important;}

.voice-card {
    background-color: #fff;
    border: 2px solid #0d6ea1;
    border-radius: 12px;
    padding: 30px;
    margin: 0 auto 30px;    
    /* PCはGridレイアウトで左:アイコン、右:テキストに分割 */
    display: grid;
    grid-template-columns: 130px 1fr; 
    gap: 0 30px; /* 縦の隙間0、横の隙間30px */
}

/* header内の要素を直接グリッドアイテムとして扱うための指定 */
.voice-card__header {
    display: contents;
}

.voice-card__icon {
    grid-column: 1; /* 左端の列 */
    grid-row: 1 / 3; /* 2行分ぶち抜きで配置 */
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #eaeaea;
    overflow: hidden;
}

.voice-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-card__title-area {
    grid-column: 2; /* 右側の列 */
    grid-row: 1; /* 1行目 */
    align-self: end; /* 下揃えにして本文に近づける */
    padding-bottom: 15px;
}

.voice-card__name {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.voice-card__title {
    font-size: 18px!important;
    color: #0d6ea1;
    font-weight: bold;
    padding: 0 !important;
  margin: 10px 0 10px !important;
}
.voice-card__title::before{
    display: none!important;
}
.voice-card__text {
    grid-column: 2; /* 右側の列 */
    grid-row: 2; /* 2行目 */
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    align-self: start;
}
.voice-area .v-btn-sp{display: none;}


@media screen and (max-width: 641px) {
    
    .voice-area{
        padding-bottom: 5em !important;
        padding-top: 1em !important;
    }
    
    .voice-area .v-right{
        margin: 2em 0 0!important;
    }
    .voice-card {
        /* Gridレイアウトを解除し、通常のブロックレイアウトに戻す */
        display: block;
        padding: 20px;
    }

    .voice-card__header {
        /* display: contents; を解除し、Flexboxでアイコンとタイトルを横並びに */
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .voice-card__icon {
        /* グリッドの指定を解除 */
        grid-column: auto;
        grid-row: auto;
        width: 70px; /* アイコンを少し小さく */
        height: 70px;
        flex-shrink: 0;
        margin-right: 15px;
    }

    .voice-card__title-area {
        /* グリッドの指定を解除 */
        grid-column: auto;
        grid-row: auto;
        padding-bottom: 0;
    }

    .voice-card__name {
        font-size: 12px; /* 少し小さく */
    }

    .voice-card__title {
        font-size: 16px!important; /* 少し小さく */
    }

    .voice-card__text {
        /* グリッドの指定を解除 */
        grid-column: auto;
        grid-row: auto;
        font-size: 14px; /* スマホ用に調整 */
    }
    .voice-area .v-btn{display: none;}
    .voice-area .v-btn-sp{display: block; margin-top: 3em !important;}
}


@media screen and (min-width:641px) and (max-width:1024px){
    .voice-area{padding-top: 2em !important;}
    .top-h2{text-align: center!important;}
    .top-en{text-align: center!important; margin-bottom: 2em;}
    .voice-area .v-btn{display: none;}
    .voice-area .v-btn-sp {display: block!important; margin-top: 3.5em;}
}


@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){
    .voice-area .v-left{flex-basis: 25%!important;}
    .voice-area .v-right{flex-basis: 70%!important;}
}

/*-----会社概要-----*/

.company-area{
    background-image: url("img/company-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.company-area .catch-copy{
    font-size: clamp(22px,2.2vw,30px);
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    margin-bottom: 3em;
}

.company-area .company-inner{
    background-color: rgba(255,255,255,0.85);
    padding: 6em 6em;
}

.company-area .company-box{
    width: 80%;
    margin: 0 auto;    
}
.company-area .company-box .wp-block-column{
    position: relative;
}
.company-area .txt01{
    font-size: 23px;
    font-weight: bold;
}
.company-area .txt02{
    font-size: 19px;
}
.company-area .c-btn{
    position: absolute;
    bottom: 0;
    right: 0;
}
.company-area .c-btn a{padding: 1.0em 0.5em!important;}


@media screen and (max-width: 641px) {
    .company-area .company-inner {padding: 3em 1.5em 7em;}
    .company-area .catch-copy {font-size: 17px;}
    .company-area .txt01 {font-size: 17px; width: 80%;}
    .company-area .txt02 {font-size: 15px; width: 80%; margin 0 auto;}
    .company-area .c-btn{
        bottom: -80px;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

    }
    .company-area .c-btn a {padding: 0.8em 0.4em !important;}
}


@media screen and (min-width:641px) and (max-width:1024px){
    .company-area .company-inner {padding: 3em 2em;}
    .company-area .company-box {width: 90%;}
    .company-area .txt01 {font-size: 18px;}
    .company-area .txt02 {font-size: 14px;}
}


@media screen and (min-width:641px) and (max-width:1024px) and (orientation: landscape){
    .company-area .company-box {width: 80%;}
}



/*-----アクセス-----*/

.access-container {
  display: flex;
  gap: 20px;
  max-width: 900px; /* 必要に応じて調整してください */
  margin: 0 auto;
  font-family: sans-serif;
  box-sizing: border-box;
}

.access-card {
  background-color: #16699B; /* 画像に近い青色を指定 */
  color: #ffffff;
  border-radius: 12px;
  padding: 30px;
  flex: 1; /* 2つのカードを等幅にする */
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 24px;
  box-sizing: border-box;
}

.access-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain; /* 画像の縦横比を崩さずに枠内に収める */
}

.access-text .ttl {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.access-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}



/*パターン2*/
.acc-card {
  background-color: #16699B; /* 画像に近い青色を指定 */
  color: #ffffff;
  border-radius: 12px;
  padding: 30px;
  flex: 1; /* 2つのカードを等幅にする */
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 24px;
  box-sizing: border-box;
}

.acc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain; /* 画像の縦横比を崩さずに枠内に収める */
}

.acc-text .ttl {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.acc-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}





/* --- スマホ向けスタイル（641px以下） --- */
@media screen and (max-width: 641px) {
  .access-container {
    gap: 12px; /* カード間の余白を少し狭める */
  }

  .access-card {
    flex-direction: column; /* アイコンとテキストを縦並びに変更 */
    justify-content: center;
    text-align: center;     /* テキストを中央揃え */
    padding: 24px 12px;
    gap: 16px;              /* アイコンとテキストの余白 */
  }

  .access-text .ttl {
    font-size: 15px; /* スマホ用に少しフォントサイズを下げる */
    margin: 0 0 8px 0;
  }

  .access-text p {
    font-size: 13px;
  }

  /* svgからimgに変更 */
  .access-icon img {
    width: 44px;
    height: 44px;
  }
    
 /*パターン2*/   
.acc-card {
    flex-direction: column; /* アイコンとテキストを縦並びに変更 */
    justify-content: center;
    text-align: center;     /* テキストを中央揃え */
    padding: 24px 12px;
    gap: 16px;              /* アイコンとテキストの余白 */
  }

  .acc-text .ttl {
    font-size: 15px; /* スマホ用に少しフォントサイズを下げる */
    margin: 0 0 8px 0;
      text-align: center;
  }

    .acc-text{font-size: 14px; text-align: left;}
  .acc-text p {font-size: 14px; margin: 17px 0 0;}

  /* svgからimgに変更 */
  .acc-icon img {
    width: 44px;
    height: 44px;
  }
    .acc-text ul{
        
    }
}


/*-----map-----*/

.map-area .wp-block-columns{
    gap: 0!important;
}
.wp-block-column.photo-left,
.wp-block-column.photo-left .wp-block-image {
        height: 450px;
        margin-bottom: 0; /* デフォルトのマージンを消す */
    }
.map-area .photo-left img{
    width: 100%;
    height: 100%;
    object-fit: cover !important; 
}


@media screen and (max-width: 641px) {
    .wp-block-column.photo-left,
    .wp-block-column.photo-left .wp-block-image{
        height: 300px;
    }
    .map-area iframe{
        height: 300px!important;
    }
}


@media screen and (min-width:641px) and (max-width:1024px){
    .map-area .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis: 0!important;}
    .map-area .wp-block-column{flex: 1!important;} 
    .map-area .photo-left img{object-position: right center;}
}


/*-----お問い合わせ-----*/

.contact-area{
    background-image: url("img/contact-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.contact-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 3em auto 3em;
    box-sizing: border-box;
}

/* 各カードのスタイル */
.contact-card-item {
    flex: 1; /* PC時は均等に横並び */
    background: #fff;
    border: 3px solid #0d6ea1;
    border-radius: 15px;
    padding: 30px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
}

/* アイコン画像エリア */
.contact-icon img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* 青いラベル（ここが広がらないように修正） */
.contact-label {
    background-color: #0d6ea1;
    color: #fff;
    font-weight: bold;
    padding: 5px 0;
    width: 140px; /* 幅を固定することで広がりを防止 */
    text-align: center;
    border-radius: 50px;
    margin: 12px auto 15px;
    font-size: 20px;
}

/* 電話番号・メールアドレス */
.contact-info {
    color: #0d6ea1;
    font-weight: bold;
    font-size: 24px;
    word-break: break-all;
    text-align: center;
    letter-spacing: 0.05em;
}
.contact-info-e{
    color: #0d6ea1;
    font-weight: bold;
    font-size: 18px;
    word-break: break-all;
    text-align: center;
    letter-spacing: 0.05em;
}

.con-notes{
    position: relative;
    padding: 0 55px;
    color:#0A5E8B; 
}
.con-notes:before, .con-notes:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 210px;
  height: 1px;
  background-color: #0D6EA1;
}

.con-notes:before {left:0;}
.con-notes:after {right: 0;}

.con-taiou{
    color: #fff;
    background: #094b68;
    border-radius: 20px;
    font-size: 17px;
    font-weight: bold;
    padding: 15px 10px;
  letter-spacing: 0.05em;
    width: 85%;
  margin: 3em auto 0;
}


@media screen and (max-width: 641px) {
    .contact-area {
        background-position: top right;
        background-size: auto;
    }
    .contact-txt strong{
        font-weight: 500!important;
    }
    .contact-wrapper {
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 10px;
    }

    /* TELとFAXを横並び(50%)にする */
    .contact-card-item {
        flex: 0 0 calc(50% - 5px); /* 半分の幅にする */
        padding: 20px 10px;
    }
    
    .contact-card-item img{
        width: 40px!important;
        height: 40px!important;
        vertical-align: middle;
    }
    
    .contact-label {
        margin: 13px 0 13px;
        font-size: 16px;
    }
    
    .contact-icon-email img{
        width: 35px!important;
        height: 35px!important;
        vertical-align: middle;
    }
    
    /* メールアドレスのカードだけ横長(100%)にする */
    .email-row {
        flex: 0 0 100%;
        flex-direction: row; /* 横並びに変更 */
        justify-content: flex-start;
        padding: 15px 20px;
    }
    .email-row a{
        display: flex;
        align-items: center;
    }

    /* スマホ版メールカードの調整 */
    .email-row .contact-icon {
        margin-bottom: 0;
        margin-right: 15px;
        height: 35px;
    }
    
    .contact-icon-email{
        margin-right: 10px;
    }
    .contact-info-e {
        font-size: 15px;
    }

    /* スマホ版で「E-mail」ラベルを隠す */
    .hide-sp {
        display: none;
    }

    .email-row .contact-info {
        font-size: 16px;
        text-align: left;
    }

    .contact-info {
        font-size: 16px;
    }
    
    .con-notes{
        font-size: 14px;
        padding: 0 0;
    }
    .con-notes::before, .con-notes::after{
        display: none;
    }
    .con-taiou{
        font-size: 13px;
        font-weight: normal;
        margin: 1em auto 0;
        width: 100%;
        padding: 15px 5px;
    }
    
}

@media screen and (min-width:641px) and (max-width:1024px){
    .contact-wrapper {
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 10px;
    }

    /* TELとFAXを横並び(50%)にする */
    .contact-card-item {
        flex: 0 0 calc(50% - 5px); /* 半分の幅にする */
        padding: 20px 10px;
    }
    
    .contact-card-item img{
        width: 40px!important;
        height: 40px!important;
        vertical-align: middle;
    }
    
    .contact-label {
        margin: 13px auto 13px;
        font-size: 16px;
    }
    
    .contact-icon-email img{
        width: 35px!important;
        height: 35px!important;
        vertical-align: middle;
    }
    
    /* メールアドレスのカードだけ横長(100%)にする */
    .email-row {
        flex: 0 0 100%;
        flex-direction: row; /* 横並びに変更 */
        justify-content: center;
        padding: 15px 20px;
    }
    .email-row a{
        display: flex;
        align-items: center;
    }

    /* スマホ版メールカードの調整 */
    .email-row .contact-icon {
        margin-bottom: 0;
        margin-right: 15px;
        height: 35px;
    }
    
    .contact-icon-email{
        margin-right: 10px;
    }
    .contact-info-e {
        font-size: 20px;
    }

    /* スマホ版で「E-mail」ラベルを隠す */
    .hide-sp {
        display: none;
    }

    .email-row .contact-info {
        font-size: 16px;
        text-align: left;
    }

    .contact-info {
        font-size: 22px;
    }
    
    .con-notes{
        font-size: 14px;
        padding: 0 0;
    }
    .con-notes::before, .con-notes::after{
        display: none;
    }
    .con-taiou{
        font-size: 16px;
        font-weight: normal;
        margin: 1em auto 0;
        width: 100%;
        padding: 15px 5px;
    }
}