/*
Theme Name: geek_original
Template: arkhe
*/

/* ----------
  COMMON
-------------- */
* { box-sizing: border-box;}

body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
    color: #222;
}

p {
    line-height: 1.6;
    margin: 0;
    padding: 0;
    word-break: break-all;
    text-align: justify;
    /**/
}

img {
    width: 100%;
    vertical-align: bottom;
}

ul,
li {
    margin: 0;
    padding: 0;
    /*font-size: 20px;*/
    line-height: 1.6;
}

a { color: #3c9dbf;}
a:hover { color: #ef8332;}
.pc_view {}
.sp_view { display: none !important;}
h2 { font-size: 1.6em;}

@media (max-width: 750px) {
    .pc_view { display: none !important;}
    .sp_view { display: inherit !important;}
    .sp_view_tel { display: block !important;}
}

small,
sub,
sup { font-size: 0.9em;}



/* ----------------------
   header/gnavi
-------------------------*/
.l-header__logo { margin-bottom: 10px; margin-top: 15px;}
.l-header__center { padding: 0 0 8px;}

.l-header__body {
    max-width: 100%;
    margin: 0;
}

.c-gnav .__mainText {
    font-size: 110%;
    transition: all 0.5s ease 0s;
}

.c-gnav__li:hover { color: #129db1 !important;}
.c-gnav .__mainText:hover { color: #129db1 !important;}
.c-gnavWrap { margin-right: 1%;}


@media screen and (max-width: 960px) {
.l-header__logo {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    line-height: 1;
}
.c-headLogo__img { margin-left: 10px;}
    .l-header__body {
        display: flex;
        position: relative;
    }

    .l-header__drawerBtn {
        position: absolute;
        text-align: center;
        width: 40px;
        right: 4%;
        top: 18px;
        border-radius: 8px;
    }

    .c-iconBtn__icon { margin: 0 auto;}
}


/* ----------------------
   下層ページ
-------------------------*/

.p-topArea { min-height: 15vh;}
.p-topArea.-noimg {
    background-image: linear-gradient(135deg, #5dbfc0 10%, #0b4e82 100%);
}

.c-postContent h2 { color: #49a3b1;}
.c-postContent h3  {
    font-size: 1.2em;
    background: #eee;
    padding: 10px 20px;
    border-radius: 10px;
}


.company_table td:nth-child(1){ width: 200px; }

@media (max-width: 768px) {
.company_table td:nth-child(1){ width: 130px; }
}

/* ----------------------
   パンくず
-------------------------*/
.p-breadcrumb {
    margin: 0 auto;
    padding: 8px 0 30px;
    position: relative;
    width: 100%;
}


/* ----------------------
   ドロワー
-------------------------*/
.p-drawer {
    background-image: linear-gradient(135deg, #5dbfc0 10%, #0b4e82 100%);
    color: #fff;
    font-weight: bold;
}

.wp-block-column ul { margin-left: 20px;}



/* ----------------------
   TOPページ
-------------------------*/
.l-content__body { margin: 0 auto;}



/* -----------------------------------
     KEY
   ----------------------------------- */

#key {margin: 0 calc(50% - 50vw);}
#key img { width: 100%;transition : 0.7s;}
#key img:hover{ opacity: 0.7;}



/* -----------------------------------
     SERVICE
   ----------------------------------- */

#service { padding: 80px 0;}

#service h2 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #7b7b7b;
    font-weight: normal;
    letter-spacing: 0.2em;
    font-size: 100%;
    margin-bottom: 40px;
}

#service h2::before {
  content: attr(data-en); /* HTMLの属性からSERVICEを読み込む */
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 180%;
  color: #129db1;
  letter-spacing: 0.15em;
  line-height: 1;
}

#service div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#service div article {
    width: 48%;
    margin-bottom: 70px;
}
#service article img { margin-bottom: 15px;}
#service article a { transition : 0.7s;}
#service article a:hover { opacity: 0.7;}
#service article h3 {
    font-size: 110%;
    margin-bottom: 15px;}


/* -----------------------------------
     COMPANY
   ----------------------------------- */

#company {
    margin: 0 calc(50% - 50vw) 50px;
    }

#company h2 {
    margin: 0;
    width: fit-content;
    position: relative;
    bottom: 20px;
    left: 15%;
    font-size: 100%;
    font-weight: normal;
}

#company a {
    width: 100%;
    position: relative;
    background: url(img/img_company.jpg) no-repeat;
    background-size: cover;
    
    display: grid;
    /* grid-template-columns: テキストエリア(auto) アイコンエリア(40px) */
    grid-template-columns: max-content;
    column-gap: 20px;
    align-items: center;
    text-decoration: none;
    
    /* 【修正ポイント1】
       grid-column / grid-row は「子要素」に書くものです。
       aタグ自体は「親（Gridコンテナ）」なので、ここからは削除します。
    */
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.1em;
    font-weight: normal;
    padding:240px 40px 10px 150px;
    transition : 0.7s;
}

#company a::before {
    content: attr(data-en);
    grid-column: 1;
    grid-row: 1;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 40px;
    color: #fff;
    line-height: 1;
    padding-left: 15%;
    margin-bottom: 20px;
    width: fit-content;
}


#company a::after {
    content: "";
    grid-column: 2; /* 2列目 */
    grid-row: 1 / span 2; /* 1行目と2行目をぶち抜いて中央に */
    
    /* アイコンの「形」を作る */
    width: 40px;
    height: 40px;
    border: 1px solid #fff; /* 白い円 */
    border-radius: 50%;
    
    /* 矢印（SVGで描画） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    margin-left: 30px;
}

#company a:hover { opacity: 0.7;}


/* -----------------------------------
     NEWS
   ----------------------------------- */
#news {
    padding: 50px 0 70px;
    margin: 0 calc(50% - 50vw);
}

#news div {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    width: 1000px;
    margin: 0 auto;
}

#news article:nth-child(1) {  width: 35%;}
#news article:nth-child(2) {  width: 60%;}

#news article h2 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #7b7b7b;
    font-weight: normal;
    letter-spacing: 0.2em;
    font-size: 100%;
    margin-bottom: 40px;
}

#news article h2::before {
  content: attr(data-en); /* HTMLの属性からSERVICEを読み込む */
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 180%;
  color: #129db1;
  letter-spacing: 0.15em;
  line-height: 1;
}

#news ul { list-style: none;}
#news ul li {
    padding: 20px 10px;
    border-bottom: 1px solid #bababa;
}

#news ul li p { font-size: 90%;}
#news ul li a {
    font-size: 100%;
    margin-top: 6px;
    display: inline-block;
    text-decoration: none;
}


.btn_detail-g {
    background: #eee;
    background-size: 18px 7px;
    padding: 9px 18px 9px 10px;
    border-radius: 100px;
    display: block;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    width: 48%;
    transition: all 0.5s;
    transform: translateY(0px);
    font-size: 80%;
    color: #222;
}

.btn_detail-g:hover {
    background: #1198af;
    background-size: 18px 7px;
    opacity:0.7;
	color: #fff !important;
}


@media screen and (max-width: 1000px) {
#service { padding: 80px 0 0;}
#service div article {
    width: 100%;
    margin-bottom: 70px;
}
 
#company { margin: 0 calc(50% - 50vw) 0px;}
#company a { padding: 60px 40px 40px 20px;}
    
#news div { width: 80%;}
#news article:nth-child(1),
#news article:nth-child(2){ width: 100%;}
#news ul {
    list-style: none;
    padding: 0 0 10px 0;
    margin-bottom: 30px;
}
#news article h2 { text-align: center;}



}



/* -----------------------------------
     Footer
   ----------------------------------- */
.l-footer__foot { padding-bottom: 0;}
.c-copyright {
    margin: 0 calc(50% - 50vw);
    background: #000;
    color: #fff;
    padding: 20px 20px;
}

.l-footer__nav a{ transition : 0.7s; }
.l-footer__nav a:hover{ color:#129db1; text-decoration: none;}







/* =========================================
   GPUサーバーLP用スタイル
========================================= */
#gpu_service_detail { margin: 0 calc(50% - 50vw);}


/* ----------------
     nayami
   --------------- */
#profit {
  background: linear-gradient(to bottom right, #009ecb, #004080);
  color: #fff;
  text-align: center;
  padding: 60px 20px 100px;
  position: relative;
  /* 下部を三角形に */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 50px),
    50% 100%,
    0% calc(100% - 50px)
  );
}

#profit .container {
  max-width: 1000px;
  margin: 0 auto;
}

#profit h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
  line-height: 1.4;
}

#profit .card-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
}

#profit article {
  background: #fff;
  color: #333;
  border-radius: 10px;
  padding: 20px;
  width: 24%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像ラッパー (article内の最初のdiv) */
#profit article > div {
  margin-bottom: 15px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#profit article img { max-height: 100%;}

#profit article p {
  line-height: 1.5;
  margin: 0;
}

#profit article p span {
  color: #009ecb;
  font-weight: bold;
}

#profit .bottom-area {
  position: relative;
  top: 20px;
}

#profit .bottom-area p {
  font-size: 130%;
  margin-bottom: 10px;
  font-weight: bold;
    text-align: center;
}

#profit .bottom-area .tags {
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
    font-size: 130%;
}

/* 「守り」「育てる」のタグスタイル (tags直下のspanのみ) */
#profit .bottom-area .tags > span {
  background: #fff;
  color: #1195ae;
  padding: 4px 15px;
  border-radius: 20px;
  display: inline-block;
}

/* 下部タイトル */
#profit h3 {
  font-size: 200%;
  font-weight: bold;
  margin: 0;
}

@media (max-width: 768px) {
  #profit {
    padding-bottom: 80px;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 30px),
      50% 100%,
      0% calc(100% - 30px)
    );
  }

  #profit h2 { font-size: 20px;}
  #profit .card-list { flex-wrap: wrap;margin-bottom: 20px;}
  #profit article { width: calc(50% - 10px); padding: 15px;}
  #profit article p { font-size: 13px;}
  #profit h3 { font-size: 24px; }
}

@media (max-width: 480px) {
  #profit article {
    width: 100%;
    max-width: 280px;
  }
}

/* ----------------
     成長市場・事業のスケール
   --------------- */
#growth { margin: 50px 0 30px;}

#growth h2 {
    text-align: center;
    font-size: 120%;
    margin-bottom: 40px;
}
#growth h2 p { font-size: 160%; display: inline;}
#growth h2 p span:nth-child(1) { color: #1195ae;}
#growth h2 p span:nth-child(2) { color: #2472a9;}

#growth picture {
    width: 1000px;
    margin: 0 auto 40px;
    display: block;
}

#growth picture img { width: 100%;}

@media (max-width: 768px) {
  #growth picture { width: 100%;}  
        #growth h2 p {
    font-size: 160%;
    display: inline-block;
    line-height: 1.3;
    margin-top: 15px;
    text-align: inherit;
}
}


/* ----------------
     メリット
   --------------- */
#merit{
    background: url(img/gpu/bg_merit.jpg) no-repeat;
    background-size: cover;
    padding:50px 0 30px;
}

#merit .container {
  max-width: 1000px;
  margin: 0 auto;
}

#merit h2 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 40px;
  line-height: 1.4;
  text-align: center;
}

#merit h2 span {
    color: #1195ae;
    font-size: 170%;
}

#merit .card-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
}

#merit article {
  background: #fff;
  color: #333;
  border-radius: 10px;
  padding: 20px;
  width: 220px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像ラッパー (article内の最初のdiv) */
#merit article > div {
  margin-bottom: 15px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#merit article img { max-height: 100%;}

#merit article p {
  line-height: 1.5;
  margin: 0;
    text-align: center;
}

#merit article p span {
  color: #009ecb;
  font-weight: bold;
}


@media (max-width: 768px) {
  #merit h2 { font-size: 20px;}
  #merit .card-list { flex-wrap: wrap;}
  #merit article { width: calc(50% - 10px); padding: 15px;}
  #merit article p { font-size: 13px;}
}

@media (max-width: 480px) {
  #merit article {
    width: 100%;
    max-width: 280px;
  }
}


/* ----------------
     節税のポイント
   --------------- */
#tax-point { padding: 80px 20px; text-align: center; background: #fff; }
#tax-point .container { max-width: 1000px; margin: 0 auto; }

#tax-point h2 { font-size: 150%; line-height: 1.4; font-weight: bold; margin-bottom: 40px; }
#tax-point h2 span { color: #009ecb; font-size: 130%; }

#tax-point article {
  background: #ebebeb;
  border-radius: 20px;
  padding: 60px 40px 40px;
  position: relative;
  margin-top: 40px;
}

#tax-point article > p {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3e6263;
    color: #fff;
    padding: 10px 60px;
    font-weight: bold;
    margin: 0;
}

#tax-point article h3 { font-size: 140%; line-height: 1.5; margin-bottom: 40px; }
#tax-point article h3 span { color: #009ecb; font-size: 130%; }
#tax-point article > div { display: flex; gap: 20px; justify-content: center; }

#tax-point .card {
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#tax-point .card h4 {
    font-size: 120%;
    line-height: 1.4;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 3px solid #ccc;
    min-height: 3em;
}

#tax-point .card:nth-child(2) h4 {border-bottom: 3px solid #98d5e0;}

#tax-point .card p {
    font-size: 125%;
    line-height: 1.3;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

#tax-point .card:first-child p span { color: #c0392b;font-size: 130%; }
#tax-point .card:last-child p span { color: #009ecb; font-size: 130%; }

.kome_icon { font-size: 70%; color: #333 !important;}
.kome_note { font-size: 80%; display: block; margin-top: 15px; text-align: left;}
.kome_note2 { display: none;}

@media (max-width: 768px) {
  #tax-point h2 { font-size: 130%; }
  #tax-point article { padding: 50px 20px 30px; }
  #tax-point article > div { flex-direction: column; }
  #tax-point .card { width: 100%; }
  #tax-point article h3 { font-size: 120%; }
    
#tax-point article > p {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3e6263;
    color: #fff;
    padding: 10px 33px;
    font-weight: bold;
    margin: 0;
    width: 66%;
    text-align: center;
}
    
/* 画像を囲む親要素をスクロール可能にする */
  #tax-point article picture {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
    margin-bottom: 10px;
  }

  /* 画像自体の幅制限を解除する */
  #tax-point article picture img {
    width: auto !important; /* 元のサイズを優先 */
    min-width: 600px; /* スクロールさせるために最小幅を確保（画像に合わせて調整してください） */
    height: auto;
    display: block;
  }
    
.kome_note2 { display: block; text-align: left; margin-bottom: 7px;font-size: 80%;}
    
}


/* ----------------
     運用はプロにお任せ
   --------------- */
#investment {
    background: url(img/gpu/bg_merit.jpg) no-repeat;
    background-size: cover;
    padding:50px 0 30px;
}

#investment  h2 {
    text-align: center;
    font-size: 120%;
    margin-bottom: 40px;
}

#investment  h2 span {
    font-size: 160%;
    display: inline;
    color: #1195ae;
}

#investment p {
    width: 700px;
    margin: 0 auto 30px;}

#investment  picture {
    width: 1000px;
    margin: 0 auto 40px;
    display: block;
}

#investment  picture img { width: 100%;}

@media (max-width: 768px) {
  #investment p {width: 90%;}
    #investment  picture {width: 100%;}
    
/* 画像を囲む親要素をスクロール可能にする */
    #investment  picture {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
    margin-bottom: 10px;
  }

  /* 画像自体の幅制限を解除する */
    #investment picture img {
    width: auto !important; /* 元のサイズを優先 */
    min-width: 600px; /* スクロールさせるために最小幅を確保（画像に合わせて調整してください） */
    height: auto;
    display: block;
  }
    
}


/* ----------------
     参考資料
   --------------- */
#future {
    background: #c8e4e6;
    padding: 80px 20px;
    text-align: center;
    color: #333; }

.future_read { width: 700px; margin: 0 auto 30px;}

#future .container { max-width: 1100px; margin: 0 auto; }

#future .container > p:first-child {
  display: inline-block;
  background: #5e8d91;
  color: #fff;
  padding: 5px 30px;
  border-radius: 20px;
  font-size: 87.5%;
  margin-bottom: 20px;
}

#future h2 {
    font-size: 175%;
    color: #3e6263;
    font-weight: bold;
    margin-bottom: 30px; }

#future article {
  background: #fff;
  border-radius: 30px;
  padding: 60px;
  display: flex;
  gap: 40px;
  text-align: left;
}

#future article > div:nth-child(1) { width: 60%; }
#future article > div:nth-child(2) { width: 45%; }

#future article h3 {
  font-size: 137.5%;
  color: #3e6263;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #c8e4e6;
}


#future article p { font-size: 93.8%; line-height: 1.8; margin-bottom: 30px; }
#future article p:last-child { margin-bottom: 0; }

#future figure { margin: 0 0 40px 0; }
#future figure:last-child { margin-bottom: 0; }
#future img { width: 100%; height: auto; border: 1px solid #eee; }
#future figure p { margin-bottom: 10px;}
.future_bottom_txt {
    font-size: 70% !important;
    line-height: 1.5 !important;
    margin-top: 10px;
}

@media (max-width: 960px) {
  #future article { flex-direction: column; padding: 40px 30px; }
  #future article > div { width: 100%; }
  #future article > div:nth-child(1),
    #future article > div:nth-child(2){width: 100%;}
    .future_read {width: 90%;}
    .future_bottom_txt { font-size: 58% !important;}
}

@media (max-width: 768px) {
  #future h2 { font-size: 150%; }
  #future .container > p:nth-of-type(2) { font-size: 93.8%; text-align: left; }
}

/* ----------------
   問い合わせ セクション全体
------------------- */
#gpu_contact { background: url(img/gpu/bg_contact.jpg) no-repeat; background-size: cover; padding: 50px 0 70px; }
#gpu_contact h2 { text-align: center; font-size: 125%; margin-bottom: 40px; color: #1195ae; font-weight: bold; }
#gpu_contact p.contact_read { width: 700px; margin: 0 auto 30px; font-size: 100%; line-height: 1.8; }

#gpu_contact_inner {
  background: #fff; border-radius: 15px; width: 800px; margin: 0 auto;
  box-shadow: 0 0 5px 3px #dcdbdb; padding: 80px 70px 30px; box-sizing: border-box;
}

/* =========================================
   #gpu_contact_inner 内部デザイン（最終修正版）
========================================= */
#gpu_contact_inner .container { max-width: 900px; margin: 0 auto; }

/* 項目ごとの行：CF7の自動改行を徹底削除 */
#gpu_contact_inner article p,
#gpu_contact_inner article .reservation-area {
 padding: 25px 0; border-bottom: 1px dotted #ccc; margin: 0;
}
#gpu_contact_inner article p br { display: none !important; }

/* お問合わせ内容と予約エリア、メッセージは上揃え */
#gpu_contact_inner article p:has(.wpcf7-checkbox),
#gpu_contact_inner article p:has(textarea),
#gpu_contact_inner article .reservation-area { align-items: flex-start; }

#gpu_contact_inner article p:last-of-type { border-bottom: none; }

/* 左側：項目名ラベル（30%固定） */
#gpu_contact_inner article > p > label,
#gpu_contact_inner article .reservation-area > label {
  width: 30% !important; min-width: 30% !important; display: flex !important; align-items: center; justify-content: space-between;
  padding-right: 40px; font-weight: bold; font-size: 93.8%; color: #333; box-sizing: border-box; flex-shrink: 0;
}

/* 必須・任意バッジ */
#gpu_contact_inner article label span { border-radius: 4px; padding: 2px 8px; font-size: 75%; color: #fff; flex-shrink: 0; margin-left: 10px; }
#gpu_contact_inner article label span.must { background: #b00; }
#gpu_contact_inner article label span.any { background: #bbb; }

/* 右側：入力エリア共通（70%固定） */
#gpu_contact_inner .wpcf7-form-control-wrap { width: 100% !important; flex-basis: 70%; display: block !important; }
#gpu_contact_inner .reservation-area .res-wrap { width: 100% !important; }

/* --- お問合わせ内容（チェックボックス）の修正 --- */
#gpu_contact_inner .wpcf7-checkbox { display: flex; flex-direction: column; gap: 10px; }
#gpu_contact_inner .wpcf7-list-item { display: block; margin: 0; }
/* チェックボックス内のラベルが30%にならないように上書き */
#gpu_contact_inner .wpcf7-list-item label { 
  width: auto !important; display: inline-flex !important; align-items: center; gap: 10px; 
  padding: 0 !important; border: none !important; cursor: pointer;
}
#gpu_contact_inner .wpcf7-list-item-label { font-weight: normal; font-size: 100%; color: #333; }

/* 入力欄の見た目 */
#gpu_contact_inner input[type="text"],
#gpu_contact_inner input[type="email"],
#gpu_contact_inner input[type="tel"],
#gpu_contact_inner input[type="date"],
#gpu_contact_inner select,
#gpu_contact_inner textarea {
  width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 12px;
  background: #f9f9f9; font-size: 100%; box-sizing: border-box;
}


/* 送信ボタン */
#gpu_contact_inner .submit-btn { text-align: center; padding-top: 40px; display: block !important; margin:0 auto;width: fit-content;}
#gpu_contact_inner input[type="submit"] {
  width: 300px; background: #3e6263; color: #fff; font-size: 112.5%; font-weight: bold;
  padding: 15px; border: none; border-radius: 50px; cursor: pointer; transition: 0.3s;
}
#gpu_contact_inner input[type="submit"]:hover { opacity: 0.8; }
#gpu_contact_inner .submit-btn .wpcf7-spinner { display: none;}
/* =========================================
   レスポンシブ
========================================= */
@media (max-width: 768px) {
  #gpu_contact p.contact_read { width: 90%; }
  #gpu_contact_inner { width: 95%; padding: 40px 20px; }
  #gpu_contact_inner article p, #gpu_contact_inner article .reservation-area { flex-direction: column; align-items: flex-start; }
  #gpu_contact_inner article > p > label, #gpu_contact_inner article .reservation-area > label { width: 100% !important; padding-right: 0; margin-bottom: 10px; }
  #gpu_contact_inner .wpcf7-form-control-wrap, #gpu_contact_inner .reservation-area .res-wrap { width: 100% !important; }
  #gpu_contact_inner .res-row { flex-wrap: wrap; }
  #gpu_contact_inner .res-row .wpcf7-form-control-wrap { flex-direction: column; }
  #gpu_contact_inner .res-row .wpcf7-date, #gpu_contact_inner .res-row .wpcf7-select { width: 100% !important; }
}