@charset "UTF-8";

/*======================================================
サイト共通の基本設定
======================================================*/
/*-----------------------------
色の関数設定
-----------------------------*/
:root{
    --main-blue: #00a0e9;
    --main-text:#231815;
    --yellow-light:#FFF7A2;
    --red-text:#E93922;
    --bg-blue:hsl(205, 100%, 90%);
}

/*-----------------------------
フォントの設定
-----------------------------*/

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.6rem;
    font-family: 'Hiragino Sans','Meiryo',sans-serif;
	-webkit-text-size-adjust: 100%;
    background-color: #fff;
    color:var(--main-text);
}

/* フォントの関数設定 */
:root{    
    --mincho:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    /* --marugo:"dnp-shuei-mgothic-std", sans-serif; */
    --marugo:"Zen Maru Gothic", sans-serif;
    --kosugi-maru:"Kosugi Maru", sans-serif;
}

/* classに直接指定する場合 */
.mincho{
    font-family:var(--mincho);
}
/* classに直接指定する場合 */
.marugo{
    font-family:var(--marugo);
    font-weight: 700;
    font-style:normal;
}
.kosugi-maru{
    font-family: var(--kosugi-maru);
    font-weight: 400;
    font-style: normal;    
}



/* 注意を引くための赤テキスト */
.red-text{
    color:var(--red-text);
}

/* スマホの時は14pxで */
@media(max-width:480px){
    body{
        font-size:1.4rem;
    }
}

/*　文字詰めの設定 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}


/*-----------------------------
共通の設定
-----------------------------*/
html{
    scroll-behavior: smooth;
}
body {
	line-height: 1.75;
	color: var(--main-text);
}

li, p{
    color:var(--main-text);
}

.list-none li{
    list-style:none;
}

/*clearfix*/

.cf:after {
  content: ""; 
  display: block; 
  clear: both;
 }

dl dt, dl dd{
    padding:0;
    margin:0;
    color:var(--main-text);
}

img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
    vertical-align: top;
}

.resize img{
    max-width: 100vw;
}

.tel-link a:link,.tel-link a:hover,.tel-link a:active{
    text-decoration: none;
}

section,article{
    padding:30px 0;
}

@media(max-width:1000px){
    section,article{
        padding-inline:1em;
    }
}

address{
    font-style: normal;
}

/*-----　　禁則処理　　-----*/

p{ line-break: normal; }
p{ line-break: strict; }

/*------------------------------------------------
WordPress画像の配置
------------------------------------------------*/

/* 画像配置 左 */
img.alignleft {
    text-align: left;
}

/* 画像配置 中央 */
img.aligncenter {
        display: block;
        margin: 1px auto;
}

/* 画像配置 右 */
img.alignright {
        display: block;
        margin: 1px 1px 1px auto;
}

/*----------------------------------------------------
リンク
------------------------------------------------------*/

a:hover img{
    opacity: 0.8;
    /* filter: alpha(opacity=70); */
    -webkit-transition:0.4s;
    transition: 0.4s;
}

a:link ,a:visited {
	color: #999;
    text-decoration:underline dotted;
}

/* リンクがある時、アイコンにはアンダーラインを表示させない */

a:before,a:after{
    text-decoration: none;
    display:inline-block;
}

/* hoverの時はふわっと */
a{
    transition: all .3s ease;
    text-decoration:underline dotted;
}

a:hover{
	color: #999;
}
    
.post{
    text-indent:1em;
    margin-bottom:0.5em;
}
/* リンクの装飾（アンダーライン）を表示させない */

.g-nav a,
.foot-nav a{
    text-decoration: none;
  }

button a{
    text-decoration: none !important;
}
.btn-report-wrapper a{
    text-decoration: none;
}

/* <a>をいれてもホバー時に変化させない、カーソルも変化させない
（リンクしていないように見せる） */

a:hover.no-link{
    background:#fff !important;
    color:unset !important;
}
    
a.no-link{
    cursor:unset !important;
    color:unset !important;
}

/* テキストを縦書き */
.text-tate{
    writing-mode: vertical-rl;    
}



/* ===================================================
テーブル
==================================================== */

.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 solid var(--main-blue);
    }
    th,td{
        text-align: left;
        padding: 1em 1em 1em 0.5rem;
        @media(max-width:767px){
            display: block;
            width: 100%;
            padding: 0.5em 0.5rem;
            }
        }
    th{
        font-weight: normal;
        white-space: nowrap;
        padding-left:1em;
        @media(max-width:767px){
            padding-bottom:0;
            }
        }
    }

/* ===================================================
ボタン
==================================================== */

.btn-rounded {
    --btn-padding: 0.75em 1.5em;
    --btn-font-size: 1.6rem;
    --btn-bg: #fff;
    --btn-color:  var(--main-blue);
    --btn-radius: 9999px;
    --btn-hover-bg: var(--main-blue);

  
    display: inline-block;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-color);
    border-radius: var(--btn-radius);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    a{
        display: block;
        text-decoration: none;
    }
  }

  
  .btn-rounded:hover {
    background-color: var(--btn-hover-bg);
    a{
        color:#fff;
    }
  }


  .btn-rounded-small{
    padding: 0.7em 1.5em;
    font-size:1.5rem;
    color:var(--main-blue);
    a{
        font-size:1.5rem;
        color:var(--main-blue);
    }
  }