@charset "UTF-8";
/*----------------------------------*/
/*----------------変数------------------*/
/*------------------------------------*/

:root {

/*フォント*/
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Geologica", sans-serif;
--font-basic: "Geologica", "Noto Sans JP", sans-serif;

/*カラー*/
  --color-black: #000;
  --color-black-right: #333333;
  --color-white: #fff;
  --color-gray-right: #f2f2f2;
  --color-blue:#00516C;
  --color-blue-right:#008ea5;
  --color-red:#e73439;
  --color-brown:#583d2e;
  --color-brown-right:#98907c;
  --color-brown-right02:#d7bba3;
  --color-pink:#f096a0;
  --color-green:#05a177;
  --color-green-right:#5dbf61;
  --color-yellowgreen:#c3d767;
  --color-beige:#f4f1e6;
  --color-yellow:#f6d900;
  --color-yellow-dark:#e5be67;


/*フォントサイズ*/
--rem: calc(1rem / 16);
/* font-size: calc(20 * var(--rem));*/

/* コンテンツの角丸 */
--radius: 10px;
--radius-big: 20px;
--radius-s: 5px;

/* コンテンツ同士の空き */
--con_ma:min(9vw, 100px);
--con_ma-big:min(15vw, 150px);

}


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
}


/*読み込みアニメーション
body {
  animation: fadeout 1.5s ease 0s 1 normal;
}
@keyframes fadeout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
*/
html {
  font-size: 16px;
  font-weight: 400;
  scroll-behavior: smooth;/* スクロールスムーズ */
}
body {
  font-feature-settings: 'palt';
  /* Safari*/
  text-size-adjust: 100%;
overflow-wrap: anywhere;/*urlもテキスト折る*/
  margin: 0;
  font-family:var(--font-basic);
color: var(--color-brown);
letter-spacing: 0.05rem;
}



/* テクスト選択反転カラー */
::selection {
  background: #e5f4e4;
}
/*Firefox*/
::-moz-selection {
  background: #e5f4e4;
}

table,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* テキストリンク */
a {
  text-decoration: none;
  color: #000;
  outline: none;
}
a:hover {
  opacity: 0.6;
}

/* 本文 */
p {
  font-feature-settings: 'palt';/*文字つめ*/
  padding: 0;
  margin: 0;
  word-wrap: break-word;
font-family: var(--font-basic);
font-size:calc(16 * var(--rem));
line-height: calc(28 * var(--rem));
color: var(--color-brown);
letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
p {
font-size:calc(14 * var(--rem));
line-height: calc(23 * var(--rem));
}
}


/* 画像 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  max-width: 100%;
  height: auto;
  border-style: none;
  image-rendering: -webkit-optimize-contrast;
}

/* clear */
.cle:before,
.cle:after {
  content: ' ';
  display: table;
}
.cle:after {
  clear: both;
}
.cle {
  zoom: 1;
}

input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
textarea:focus {
  border: none;
  outline: 0;
}

input[type='submit'],
input[type='button'] {
  cursor: pointer;
  outline: none;
  border: none;
}

/*補足文字*/
small {
  font-size: calc(12 * var(--rem));
}





/*----------------------------------*/
/*----------------共通テキスト------------------*/
/*------------------------------------*/
.ja_txt{font-family: var(--font-ja);}
.en_txt{font-family: var(--font-en);}




/*-----------------------------------------------------*/
/*---------------------- タイトル ----------------------*/
/*-----------------------------------------------------*/

/*--------- ページタイトル -----------*/
.p_title{
background-color: var(--color-green);
text-align: center;
color: var(--color-white);
padding: min(7vw, 120px) min(3vw, 40px) min(3vw, 40px) min(3vw, 40px);
position: relative;
letter-spacing: 0.1rem;
font-size: calc(40 * var(--rem));
font-weight: 600;
margin-bottom: min(17vw, 150px);
}
.p_title::after{
position: absolute;
content: "";
width: 100%;
display: block;
height: 30px;
bottom: -30px;
left: 0;
background-image: url(../../common/img/p_title_bottom.svg);
background-size:cover;
background-position: top center;
}
@media screen and (max-width: 950px) {
.p_title{
font-size: calc(30 * var(--rem));
padding: 15vw 3vw 3vw 3vw;
}

}


/*--------- 項目タイトル -----------*/

.title01{
text-align: center;
margin-bottom: 30px;
}
/* 英語部分 */
.title01 .title-en {
  display: inline-block;
  overflow: hidden;
}
.title01 .title-en .first,
.title01 .title-en .rest {
font-size: calc(60 * var(--rem));
font-weight: 600;
letter-spacing: 0.1rem;
}
/* 1文字目 */
.title01 .title-en .first {
  color: var(--color-pink);
margin-right: -7px;
}
/* 残り文字 */
.title01 .title-en .rest {
  display: inline-block;
  transform: translateX(-100%);
  opacity: 0;
}
.title01 .title-ja{
font-size: calc(16 * var(--rem));
display: block;
margin-top: -10px;
}
.title01.on .rest {
  animation: slideText 0.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes slideText {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
.title01 .title-en .first,
.title01 .title-en .rest {
font-size: calc(34 * var(--rem));
}
.title01 .title-ja{
font-size: calc(14 * var(--rem));
}
}

/*--------- 項目タイトル 白 -----------*/
.title01.w{
color: var(--color-white);
}




/*--------- 見出しタイトル -----------*/
.title02{
color: var(--color-green);
border-bottom: 2px dotted;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: min(5vw,calc(30 * var(--rem)));
font-weight: 600;
}





/*-----------------------------------------------------*/
/*---------------------- ボタン ----------------------*/
/*-----------------------------------------------------*/

/* 基本 */
:is(.bt01, .bt02, .bt03,.bt04) {
  position: relative;
  display: inline-block;
  padding: 7px 40px 7px 30px;
  border-radius: 50px;
  color: var(--color-white);
  transition: 0.3s;
font-size: calc(16 * var(--rem));
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
:is(.bt01, .bt02, .bt03,.bt04) {
font-size: calc(14 * var(--rem));
}
}

:is(.bt01, .bt02, .bt03,.bt04):hover{
opacity: 1;
}

:is(.bt01, .bt02, .bt03,.bt04)::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  display: inline-block;
  width: 7px;
  height: 100%;
  background-image: url(../img/icon_arrow_p.svg);
  background-position: center;
  transition: 0.3s;
}
:is(.bt01, .bt02, .bt03,.bt04):hover::after{
  right: 10px;
}
/* 大きいボタン */
:is(.bt01, .bt02, .bt03,.bt04).big {
  padding: 15px 50px 15px 30px;
  border-radius: 70px;
box-sizing: border-box;
}
:is(.bt01, .bt02, .bt03,.bt04).big::after {
  width: 10px;
}



/*背景 茶 */
.bt01{
  background-color: var(--color-brown);
}
.bt01:hover{
background-color: color-mix(in srgb, var(--color-brown) 80%, var(--color-black));
}

/*背景 緑 */
.bt02{
  background-color: var(--color-green);
}
.bt02:hover{
background-color: color-mix(in srgb, var(--color-green) 80%, var(--color-black));
}

/*背景 白 */
.bt03{
  background-color: var(--color-white);
color: var(--color-brown);
}
.bt03::after {
  background-image: url(../img/icon_arrow_b.svg);
}


/*矢印 白 */
.bt04{
  background-color: var(--color-brown);
color: var(--color-white);
}
.bt04:hover{
background-color: color-mix(in srgb, var(--color-brown) 80%, var(--color-white));
}
.bt04::after {
  background-image: url(../img/icon_arrow_w.svg);
}







/*外部リンクアイコン（span内）*/
.out-link span:first-child:before {
  content: "";
  display: inline-block;
  margin-right: 7px;
margin-left: 3px;
  background: url(../img/icon_outlink_w.svg) no-repeat;
  width: 13px;
  height: 13px;
  vertical-align: -1px;
}

/*PDFアイコン（span内）*/
.pdf-link span:first-child:before {
  content: "";
  display: inline-block;
  margin-right: 7px;
  background: url(../img/icon_pdf_w.svg) no-repeat;
  width: 10px;
  height: 13px;
}



/*-----------------------------------------------------*/
/*---------------------- 囲み ----------------------*/
/*-----------------------------------------------------*/








/*-----------------------------------------------------*/
/*---------------------- リスト ----------------------*/
/*-----------------------------------------------------*/

/* 基本 */
.list_temp li{
list-style:disc;
margin: 0 0 5px 1rem;
}

/* 色まる */
.list_maru {
list-style: none;
  display: inline-block;
  padding-left: 1rem;
  text-indent: -1rem;
}
.list_maru li {
  margin-bottom: 3px;
  font-size: calc(16 * var(--rem));
  line-height: calc(26 * var(--rem));
}
.list_maru li::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
background-color: var(--color-green);
  border-radius: 50px;
  margin-right: 5px;
}


/*数字 */
.list_number {
margin-left: 1.2rem;
counter-reset: num; /* ol_li カウンタをセットする(値もリセット) */
}
.list_number li {
  margin-bottom: 3px;
  font-size: calc(16 * var(--rem));
  line-height: calc(26 * var(--rem));
list-style: none;
}
.list_number li::before {
margin-left: -1.2rem;
margin-right: 5px;
  font-size: calc(18 * var(--rem));
counter-increment:num; /* ol_li カウンタの値に1加える */
content: counter(num)"."; /* before擬似要素のcontentで出力 */
color: var(--color-blue);
}


/*こめじるし */
.list_kome {
  display: inline-block;
  padding-left: 0.3rem;
  text-indent: -0.3rem;
  margin-left: 0.3rem;
}
.list_kome li {
  font-size: calc(12 * var(--rem));
  line-height: calc(18 * var(--rem));
}
.list_kome li::before {
  content: "※";
  display: inline-block;
}




/*-----------------------------------------------------*/
/*---------------------- テーブル ----------------------*/
/*-----------------------------------------------------*/
/*基本のテーブル（赤） */
table:is(.table01){
border: 1px var(--color-gray-table) solid;
border-collapse:collapse;/* 線を重ねる */
}
table:is(.table01, .table02) th{
padding:7px 10px;
border: 1px var(--color-blue-murky---color-gray-table) solid;
background: var(--color-red-light);
text-align: center;
white-space: nowrap; /* 改行しない */
color: var(--color-white);
vertical-align:middle;/*文字の垂直そろえを上揃えに*/
border: 1px var(--color-gray-table) solid;
}
table:is(.table01, .table02) tr:nth-child(1) th{
background: var(--color-yellow);
}
table:is(.table01, .table02) tr:nth-child(1) th:first-child{
background: var(--color-red-light);
}
table:is(.table01, .table02) tr:nth-child(odd){
background:#F9F9F9;
}
table:is(.table01, .table02) td{
padding:7px 10px;
border: 1px var(--color-gray-table) solid;
vertical-align:top;/*文字の垂直そろえを上揃えに*/
}







/*-----------------------------------------------------*/
/*---------------------- マージン ----------------------*/
/*-----------------------------------------------------*/
/*上*/
.ma-t-10{margin-top: 10px;}
.ma-t-20{margin-top: 20px;}
.ma-t-30{margin-top: 30px;}
.ma-t-40{margin-top: 40px;}
.ma-t-50{margin-top: 50px;}
/*左*/
.ma-l-10{margin-left: 10px;}
.ma-l-20{margin-left: 20px;}
.ma-l-30{margin-left: 30px;}
.ma-l-40{margin-left: 40px;}
.ma-l-50{margin-left: 50px;}
/*右*/
.ma-r-10{margin-right: 10px;}
.ma-r-20{margin-right: 20px;}
.ma-r-30{margin-right: 30px;}
.ma-r-40{margin-right: 40px;}
.ma-r-50{margin-right: 50px;}
/*下*/
.ma-b-10{margin-bottom: 10px;}
.ma-b-20{margin-bottom: 20px;}
.ma-b-30{margin-bottom: 30px;}
.ma-b-40{margin-bottom: 40px;}
.ma-b-50{margin-bottom: 50px;}
/*中央*/
.ma-c{margin-left: auto; margin-right: auto;}


/*-----------------------------------------------------*/
/*------------------------コンテンツ--------------------------*/
/*-----------------------------------------------------*/
.pc_no {display: none;}
.sp_no {display: block;}

@media screen and (max-width: 768px) {
.sp_no {display: none;}
.pc_no {display:block;}
}

.content {
  width: min(85%, 1000px);
  margin-left: auto;
  margin-right: auto;
}
.w800 {width: min(85% ,800px);}




/*-----------------------------------------------------*/
/*------------------------ロード--------------------------*/
/*-----------------------------------------------------*/
.loading {
  position: fixed;
  inset: 0;
  background: #fff;
text-align: center;
  z-index: 10000;
  display: grid;
  place-content: center;/*gridの上下中央配置*/
  place-items: center;/*要素二つ以上ある場合に*/
  transition: opacity 0.6s ease;
}

.loading img{
width: 50px;
margin-bottom: 10px;
}

.loading.is-hide {
  opacity: 0;
  pointer-events: none;
}