@charset "UTF-8";
/*=============================================
このサイトで使い回すもの・コンポーネント
=============================================*/

/*------------------------------------------------------
カラー component/_color.scss
------------------------------------------------------*/
:root {
    --pink-main:#DEA4AA;
    --pink-text:#E75564;
    --red-text:#E90F0F;
    --main-text:#5E5D35;
    --blue-dark  :#35505E;
    --blue-bg-5: color-mix(in srgb, #35505E 5%, white);
    --grey-bg:#F9F8F4;
    --grey-btn:#D9D9D9;
    --green-bg:#F2F6F1;
    /* メインピンクのバージョン違い */
    --pink-main-5: color-mix(in srgb, #DEA4AA 5%, white);
    --pink-main-10: color-mix(in srgb, #DEA4AA 10%, white);
    --pink-main-30: color-mix(in srgb, #DEA4AA 30%, white);
    --pink-main-50: color-mix(in srgb, #DEA4AA 50%, white);
    --pink-main-70: color-mix(in srgb, #DEA4AA 70%, white);
    --pink-main-80: color-mix(in srgb, #DEA4AA 80%, white);
    --pink-main-90: color-mix(in srgb, #DEA4AA 90%, white);

    --grey-bg-5: color-mix(in srgb, #f9f8f4 5%, black);
    --grey-bg-10: color-mix(in srgb, #f9f8f4 10%, black);
    --grey-bg-30: color-mix(in srgb, #f9f8f4 30%, black);
    --grey-bg-50: color-mix(in srgb, #f9f8f4 50%, black);
    --grey-bg-70: color-mix(in srgb, #f9f8f4 70%, black);
    --grey-bg-90: color-mix(in srgb, #f9f8f4 90%, black);

}


/*------------------------------------------------------
よく使う色
------------------------------------------------------*/


/*------------------------------------------------------
フォントファミリー
------------------------------------------------------*/

:root{ 
    --mincho:"BIZ UDMincho", serif;
}


/*------------------------------------------------------
基本の角丸ボタン
------------------------------------------------------*/

/* ボタン背景用 */
.btn-blue-dark{
    --btnColor:#35505E;
    --textColor:#fff;
    --borderColor:#35505E;
}
.btn-grey{
    --btnColor:#D9D9D9;
    --textColor:#333;
    --borderColor:#D9D9D9;
}
.btn-solid{
    --btnColor:#fff;
    --textColor:#35505E;
    --borderColor:#bbb;
}
.btn-pink{
    --btnColor:color-mix(in srgb, #DEA4AA 30%, white);
    --textColor:#E75564;
    --borderColor:color-mix(in srgb, #DEA4AA 30%, white);
}

.btn-r a{
    display:inline-block;
    border-radius:100vmax;
    border:1px solid var(--borderColor);
    padding:0.7em 3em;
    font-size:clamp(1.3rem,1.5vw,1.5rem);
    background: var(--btnColor);
    color:var(--textColor);
    min-width:280px;       
    max-width: 100%;
    text-align: center;
    position:relative;
    &::after{
        content:'\f105';
        font:var(--fa-font-light);
        margin-left:1em;
        position:absolute;
        right:1.5em;
        top:50%;
        transform:translateY(-50%);
    }
    &:hover{
        color:var(--btnColor);
        background: var(--textColor);
        border-color:var(--btnColor);
    }
}

/* 大きめボタン */
.btn-r a.btn-large{
    padding:1em 3em;
}

/* 小さめボタン */
.btn-r a.btn-small{
    padding:0.3em 1em;
    min-width:160px;
}

/*------------------------------------------------------
基本の四角ボタン
------------------------------------------------------*/
.btn-basic{
a{
    display:inline-block;
    /* border-radius:100vmax; */
    border:1px solid var(--borderColor);
    padding:0.7em 3em;
    font-size:clamp(1.3rem,1.5vw,1.5rem);
    background: var(--btnColor);
    color:var(--textColor);
    min-width:280px;       
    max-width: 100%;
    text-align: center;
    position:relative;
    &:hover{
        color:var(--btnColor);
        background: var(--textColor);
        border-color:var(--btnColor);
    }  
}

}




/* ダウンロードボタン */
.btn-dl a{
    display:inline-block;
    /* border-radius:100vmax; */
    border:1px solid var(--borderColor);
    padding:0.7em 1em;
    font-size:clamp(1.3rem,1.5vw,1.5rem);
    background: var(--btnColor);
    color:var(--textColor);
    width:100%;
    /* max-width: 100%; */
    text-align: center;
    position:relative;
    &::after{
        content:'\f56d';
        font:var(--fa-font-light);
        margin-left:1em;
        position:absolute;
        right:1.5em;
        top:50%;
        transform:translateY(-50%);
    }
    &:hover{
        color:var(--btnColor);
        background: var(--textColor);
        border-color:var(--btnColor);
    }
}
.btn-dl-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap:1em;
}

/* ボタンの配置 */
.btn-wrapper{
    width: 100%;
    text-align: center;
}

.btn-wrapper-col1{
    margin:3em auto;
    text-align: center;
}

.btn-wrapper-col2{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,auto));
    gap: 1em;
    justify-content: center;
    margin:3em auto;
}


/*======================================================
アイコンの設定
======================================================*/
/*------------------------------------------------------
矢印系
------------------------------------------------------*/
/* シンプル矢印細いバージョン （ → ）*/
.ico-arrow-r {
  text-decoration: none !important;
}
.ico-arrow-r-be::before, .ico-arrow-r-af::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f061";
}
.ico-arrow-r-be::before {
  margin-right: 0.5em;
}
.ico-arrow-r-af::after {
  margin-left: 0.5em;
}

/* 丸付き矢印・矢印細いバージョン （ ○ の中に → ）*/
.ico-arrow-circle-r-af, .ico-arrow-circle-r-be {
  text-decoration: none !important;
}
.ico-arrow-circle-r-be::before, .ico-arrow-circle-r-af::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f0a9";
}
.ico-arrow-circle-r-be::before {
  margin-right: 0.5em;
}
.ico-arrow-circle-r-af::after {
  margin-left: 0.5em;
}

/* 丸付き矢印・矢印細いバージョン （ ○ の中に > ）*/
.ico-chevron-circle-af, .ico-chevron-circle-be {
  text-decoration: none !important;
}
.ico-chevron-circle-be::before, .ico-chevron-circle-af::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f138";
}
.ico-chevron-circle-be::before {
  margin-right: 0.5em;
}
.ico-chevron-circle-af::after {
  margin-left: 0.5em;
}


/* リンクマーク */
.ico-link-af, .ico-link-be {
  text-decoration: none !important;
}
.ico-link-be::before, .ico-link-af::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f35d";
  color: #21937D;
}
.ico-link-be::before {
  margin-right: 0.5em;
}
.ico-link-af::after {
  margin-left: 0.5em;
}

/* ファイルマーク */
.ico-file-af, .ico-file-be {
  text-decoration: none !important;
}
.ico-filebe::before, .ico-fileaf::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f15c";
  color: #E68B8B;
}
.ico-file-be::before {
  margin-right: 0.5em;
}
.ico-file-af::after {
  margin-left: 0.5em;
}

/* 電話マーク */
.ico-tel::before{
    font: var(--fa-font-solid);
    content:"\f095";
    margin-right:0.5em;
}

/* FAXマーク */
.ico-fax::before{
    font: var(--fa-font-solid);
    content:"\f1ac";
    margin-right:0.5em;
}

/*------------------------------------------------------
ダウンロード系
------------------------------------------------------*/
/* ダウンロードアイコン */
.ico-dl-af, .ico-dl-be {
  text-decoration: none !important;
}
.ico-dl-be::before, .ico-dl-af::after {
  display: inline-block;
  font: var(--fa-font-regular);
  content: "\f56d";
}
.ico-dl-be::before {
  margin-right: 0.5em;
}
.ico-dl-af::after {
  margin-left: 0.5em;
}

/*------------------------------------------------------
書類のマーク
------------------------------------------------------*/
.ico-dobe {
  display: inline-block;
  font: var(--fa-font-solid);
  content: "\e178";
}
.ico-dobe-af, .ico-dobe-be {
  text-decoration: none !important;
}
.ico-dobe-be::before, .ico-dobe-af::after {
  color: #333;
}
.ico-dobe-be::before {
  margin-right: 0.5em;
}
.ico-dobe-af::after {
  margin-left: 0.5em;
}

/*------------------------------------------------------
●印　こちらは-beforeのみ
------------------------------------------------------*/
.ico-circle-be {
  text-decoration: none !important;
  position: relative;
  padding-left: 20px;
}
.ico-circle-be::before {
  display: inline-block;
  font: var(--fa-font-solid);
  content: "\f111";
  color: #f00;
  font-size: 80%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*======================================================
リストスタイル設定 
======================================================*/
/*------------------------------------------------------
リストスタイル　●印
------------------------------------------------------*/
.list-circle li {
  text-decoration: none !important;
  padding-left: 0;
  margin-bottom: 1em;
  @media print, screen and (min-width: 768px) {
    margin-left: 1em;
    padding-left: 1em;
    text-indent: -0.6em;
    }
}

.list-circle li::before {
  display: inline-block;
  font: var(--fa-font-solid);
  content: "\f111";
  color: #d9d9d9;
  margin-right: 0.5em;
  font-size: 1.4rem;
}

/*======================================================
カードレイアウト
======================================================*/
/*------------------------------------------------------
縦型カードレイアウト（写真入り）
------------------------------------------------------*/
.card-wrapper {
    display: grid;
    align-self: start;
}

.card {
  background-color: var(--blue-bg);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;  
}
@media screen and (max-width: 767px) {
  .card {
    margin-bottom: 20px;
  }
}
.card p {
  padding: 0 1em 1em;
}

.card figure {
  padding: 0 1em;
}
.card figure img:hover {
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  -webkit-transform: scale(1.2) 0.3s;
    transform: scale(1.2) 0.3s;
  overflow: hidden;
}
.card figure figcaption {
  font-weight: bold;
  text-align: center;
  margin: 10px auto 0;
}






/*------------------------------------------------------
「new」吹き出し形式
------------------------------------------------------*/
.balloon-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0.5em 1.5em 0;
  padding: 0 5px;
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #FFF;
  font-size: 1.1rem;
  background: #ffcc75;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.balloon-left:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left: 6px solid #ffcc75;
  z-index: 0;
}

/*======================================================
テーブル component/_table.scss
=====================================================*/
.ta-gray {
    --bgColor:#d6d6d6;
}
.ta-beige {
  --bgColor: #ebe8d5;
}
.ta-blue {
  --bgColor: #e5f2fa;
}

.ta {
  width: 100%;
  margin-bottom: 30px;
  /* テーブル見出しが上の場合は高さを低く。見出しが左の場合は適用されない。 */
  th{
    background: var(--bgColor);
  }
  th,td{
    padding: 1em;
    border: 1px solid #ccc;
  }
}

/* 行の余白が狭いテーブルはta-s */
.ta-s{
    &.ta{
        th,td{
            padding: 0.5em 1em;
        }
    }
}

.ta thead{
    th {
    padding: 0.5em;
    }
}

.ta-line td::before{    
        color: #4d9bc1;
        font-weight: bold;
        display: inline-block;
        width: 20%;
        min-width: 4em;
}

/*------------------------------------------------------
テーブルレスポンシブ表示（複雑な表の場合は別途設定してください。）
------------------------------------------------------*/
@media (max-width: 600px) {
  .ta-s-none {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  /* 見出しが1行目（1番上）の場合にスマホでは1列表示にする */
  .ta-res-line thead {
    display: none;
  }
  .ta-res-line th,
  .ta-res-line td {
    display: block;
    width: 100%;
    border-bottom: none;
    border:1px solid;
  }
  .ta-res-line th:first-of-type {
    background: var(--bgColor);
    /* font-weight: bold; */
  }
  /* .ta-res-line tr:first-of-type {
    border-bottom: solid 1px;
  } */
  /* 見出しが1列目（左）の場合にスマホでは1列表示にする */
  .ta-res-row th,
  .ta-res-row td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .ta-res-row th {
    background: var(--bgColor);
  }
  .ta-res-row tr:last-of-type td:last-of-type {
    border-bottom: 1px solid #999;
  }
  /* スマホの場合、はみ出た部分をスクロールさせる */
  .ta-res-wrapper {
    width: 100%;
    overflow: scroll;
  }
  .ta-res-scroll {
    width: 1200px;
  }
  .ta-res-scroll td:first-of-type,
  .ta-res-scroll th:first-of-type {
    position: sticky;
    left: 0;
    background: #fff;
  }
  .ta-res-scroll td:first-of-type:before,
  .ta-res-scroll th:first-of-type:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gray-bg);
    z-index: -1;
  }
}
/* スマホの場合、１列目（左）を見出しにして、１行目（1番上）の見出しをセルの中に太字で表示させる
     その際、２列目以降の<td>には、data-label="１行目の見出し"を入れる。
     色等細かい設定は個別に・・・  */
@media screen and (max-width: 767px) {
  .ta-res-line-title thead {
    display: none;
  }
  .ta-res-line-title tr {
    width: 100%;
  }
  .ta-res-line-title td {
    display: block;
    width: 100%;
    border-top: none;
  }
  .ta-res-line-title td:first-of-type{
    border-top:1px solid;
  }
  .ta-res-line-title td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    margin-bottom: 0.2em;
  }
  /* .ta-res-line-title td:first-child {
    background: #fef6e2;
    font-weight: bold;
  } */
}

/*----------------------------------------------------
横線のみのテーブル
-----------------------------------------------------*/

.ta-border{
    width: 100%;
    table-layout: auto;
    tr:not(:last-of-type){
        border-bottom:1px dashed;
    }
    th,td{
        text-align: left;
        padding: 1em 1em 1em 0.5rem;
        @media(max-width:767px){
            display: block;
            width: 100%;
            padding: 0.5em 0.5rem;
            }
        }
}    

.ta-border{
    th,td:first-of-type{
        font-weight: bold;
        white-space: nowrap;
        @media(max-width:767px){
            padding-bottom:0;
            }

        }
    }

/*----------------------------------------------------
四角いの細めのボーダー枠
-----------------------------------------------------*/
.border__gray {
  border: 1px solid #ccc;
  padding: 30px;
}
@media screen and (max-width: 767px) {
  .border__gray {
    padding: 10px;
  }
}

/*----------------------------------------------------
米印をつける場合
-----------------------------------------------------*/
.kome {
  position: relative;
}
.kome::after {
  content: "※";
  position: absolute;
  top: -18px;
  right: -20px;
  visibility: visible;
  font-size: 1.2rem;
  color: #333;
}

/*----------------------------------------------------
小さめの注意書き（赤）
-----------------------------------------------------*/
.att {
  font-size: clamp(1.1rem, 1.0909090909vw, 1.3rem);
  color: #E90F0F;
}


/*------------------------------------------------------
見出し
------------------------------------------------------*/

/* 見出しにheading-centerを設定した場合h2とh3でフォントサイズを変える */

h2.heading-center{
    --fontSize:clamp(2.0rem,3.84vw,3.8rem);
}
h3.heading-center
{
    --fontSize:clamp(1.8rem,2.8vw,3.0rem);
}
.heading-center{
    /* font-size:clamp(2.0rem,3.84vw,3.8rem); */
    font-size:var(--fontSize);
    text-align: center;
    margin-bottom:1em;
    font-weight: normal;
}

/* 左にボーダーのある見出し　同時に色のクラスを指定して色分け */

.border-pink{
    --borderColor:var(--pink-main);
}
.border-blue{
    --borderColor:var(--blue-dark);
}
.border-font-color{
    --borderColor:var(--main-text);
}

/* 左にボーダーのある見出し　h3とh4でフォントサイズ変更 */

h3.heading-border-left{
    --fontSize:clamp(1.6rem,2.6vw,2.6rem);
}

h4.heading-border-left{
    --fontSize:clamp(1.5rem,1.8vw,1.8rem);
}

.heading-border-left{
    /* border-left:5px solid var(--pink-main); */
    border-left:5px solid var(--borderColor);
    padding-left:0.5em;
    margin-bottom:1em;
    font-weight: normal;
    font-size:var(--fontSize);
}

.heading-card-title{
    text-align: center;
    font-size:1.3rem;
    line-height: 1.5;
}
/* ページタイトル　センター */
.heading-page{
    text-align: center;
    font-size:clamp(2.0rem,3.84vw,3.8rem);
    font-family: var(--mincho);
    margin-bottom:1em;
}
/* セクションタイトル　センター */
.heading-sec-center{
    text-align: center;
    font-size:clamp(1.8rem,3.46vw,3.4rem);
    font-weight: normal;
    margin-bottom:2em;
}