@charset "UTF-8";

*,
*::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);
}


/* footerを下部に固定 */
body {
height: 100vh;
display: grid;
grid-template-rows:auto 1fr auto;
}
.head{
grid-row:1;
}
.content{
grid-row:2;
}
.footer{
grid-row:3;
}



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

/*Firefox*/
::-moz-selection {
  background: #ffd9ed;
}

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: var(--s16);
line-height: var(--s26);
}
/* 画像 */
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;
}

hr {
  height: 1px;
  background-color: #4d4d4d;
  border: none;
  color: #4d4d4d;
  margin: 10px 0;
}

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: var(--s12);
}


/*----------------------------------*/
/*----------------変数------------------*/
/*------------------------------------*/

:root {

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

/*カラー*/
  --color-black: #000;
  --color-gray: #80888a;
  --color-gray-dark: #575d5e;
  --color-gray-light: #f5f5f5;
--color-gray-table: #E5E5E5;
  --color-white: #fff;
  --color-blue:#00516C;
  --color-blue-light:#429CDA;
  --color-red:#D7000F;
  --color-red-light:#F04954;
  --color-yellow:#F4B831;
  --color-yellow-light:#F7F2EB;


/*フォントサイズ*/
  --s10: calc(10 / 16 * 1rem);
  --s12: calc(12 / 16 * 1rem);
  --s14: calc(14 / 16 * 1rem);
  --s15: calc(15 / 16 * 1rem);
  --s16: calc(16 / 16 * 1rem);
  --s17: calc(17 / 16 * 1rem);
  --s18: calc(18 / 16 * 1rem);
  --s19: calc(19 / 16 * 1rem);
  --s20: calc(20 / 16 * 1rem);
  --s21: calc(21 / 16 * 1rem);
  --s22: calc(22 / 16 * 1rem);
  --s23: calc(23 / 16 * 1rem);
  --s24: calc(24 / 16 * 1rem);
  --s25: calc(25 / 16 * 1rem);
  --s26: calc(26 / 16 * 1rem);
  --s27: calc(27 / 16 * 1rem);
  --s28: calc(28 / 16 * 1rem);
  --s29: calc(29 / 16 * 1rem);
  --s30: calc(30 / 16 * 1rem);
  --s31: calc(31 / 16 * 1rem);
  --s32: calc(32 / 16 * 1rem);
  --s33: calc(33 / 16 * 1rem);
  --s34: calc(34 / 16 * 1rem);
  --s35: calc(35 / 16 * 1rem);
  --s36: calc(36 / 16 * 1rem);
  --s37: calc(37 / 16 * 1rem);
  --s38: calc(38 / 16 * 1rem);
  --s39: calc(39 / 16 * 1rem);
  --s40: calc(40 / 16 * 1rem);
  --s41: calc(41 / 16 * 1rem);
  --s42: calc(42 / 16 * 1rem);
  --s43: calc(43 / 16 * 1rem);
  --s44: calc(44 / 16 * 1rem);
  --s45: calc(45 / 16 * 1rem);
  --s46: calc(46 / 16 * 1rem);
  --s47: calc(47 / 16 * 1rem);
  --s48: calc(48 / 16 * 1rem);
  --s49: calc(49 / 16 * 1rem);
  --s50: calc(50 / 16 * 1rem);
  --s51: calc(51 / 16 * 1rem);
  --s52: calc(52 / 16 * 1rem);
  --s53: calc(53 / 16 * 1rem);
  --s54: calc(54 / 16 * 1rem);
  --s55: calc(55 / 16 * 1rem);
  --s56: calc(56 / 16 * 1rem);
  --s57: calc(57 / 16 * 1rem);
  --s58: calc(58 / 16 * 1rem);
  --s59: calc(59 / 16 * 1rem);
  --s60: calc(60 / 16 * 1rem);
  --s64: calc(64 / 16 * 1rem);
  --s70: calc(70 / 16 * 1rem);
  --s80: calc(80 / 16 * 1rem);
  --s90: calc(90 / 16 * 1rem);
  --s100: calc(100 / 16 * 1rem);
  --s110: calc(110 / 16 * 1rem);
  --s120: calc(120 / 16 * 1rem);
  --s132: calc(132 / 16 * 1rem);


/* コンテンツの角丸と食い込み */
--radius: 70px 70px 0px 0px;
--box_m_top: -60px;
--radius-sp: 40px 40px 0px 0px;
--box_m_top-sp: -30px;

}



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




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

/*--------- 項目タイトル -----------*/
.title01{margin-bottom: 20px;}
.title01 .ja_txt{
color: var(--color-red);
font-size:var(--s16);
display: block;
}
.title01 .en-se_txt{
font-size:var(--s80);
line-height: 3.5rem;
padding: 20px 10px;
  clip-path: inset(0 105% 0 0);
  display: inline-block;
  transition: 0.4s cubic-bezier(0.42, 0, 1, 1);
  transition-property: clip-path;
  transform: rotate(-15deg) skewX(-0.03turn); /*回転*/
}
.title01 .en-se_txt.on {
  clip-path: inset(0);
}
@media screen and (max-width: 768px) {
  .title01 .en-se_txt {
    font-size: var(--s50);
line-height: 2.0rem;
  }
}


/*--------- ページタイトル -----------*/
.page_title{
margin-bottom: 80px;
}
.page_title .content{
position: relative;
}
.page_title p{
position: absolute;
font-family: var(--font-en-serif);
color: var(--color-gray-light);
font-size: var(--s100);
transform: rotate(-15deg) skewX(-0.03turn); /*回転*/
  display: inline-block;
z-index: -1;
top:30px;
left: 40px;
}
.page_title h1{
color: var(--color-red);
font-size: var(--s40);
font-weight: 500;
border-left: 5px solid;
padding-left: 20px;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.page_title{
margin-bottom: 50px;
}
.page_title p{
font-size: var(--s70);
top:20px;
left: 30px;
}
.page_title h1{
font-size: var(--s28);
font-weight: 500;
}
}






/*--------- 見出し -----------*/
.title02{
font-size: var(--s34);
font-weight: 600;
line-height: var(--s50);
margin-bottom: 20px;
}
/*◎900px以下*/
@media screen and (max-width: 900px) {
.title02{
font-size: var(--s34);
line-height: var(--s48);
}
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.title02{
font-size: var(--s28);
line-height: var(--s40);
margin-bottom: 10px;
}
}
/*◎400px以下*/
@media screen and (max-width: 400px) {
.title02{
font-size: var(--s24);
line-height: var(--s36);
margin-bottom: 10px;
}
}


/*--------- グレーベタ角丸 -----------*/
.title03{
background-color: var(--color-gray-dark);
padding: 10px 20px;
border-radius: 50px;
color: var(--color-white);
text-align: center;
font-size: var(--s20);
line-height: 100%;
margin-bottom: 20px;
}







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

/*背景黒 矢印 */
.bt01, .bt02 {
  position: relative;
  display: inline-block;
  background-color: var(--color-black);
  padding: 7px 50px 7px 40px;
  border-radius: 50px;
  color: var(--color-white);
}
.bt01::after,
.bt02::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  display: inline-block;
  width: 13px;
  height: 100%;
  background-image: url(../img/icon/icon_arrow_right.svg);
  background-position: center;
  transition: 0.3s;
}
.bt01:hover::after,
.bt02:hover::after {
  right: 10px;
}


/*背景白 矢印 */
.bt02{
  background-color: var(--color-white);
color: var(--color-black);
}
.bt02::after {
  background-image: url(../img/icon/icon_arrow_right-b.svg);
}



/*外部リンクアイコン（span内）*/
.out-link span:first-child:before {
  content: "";
  display: inline-block;
  margin-right: 7px;
  background: url(../img/icon/icon_outlink.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/icon_pdf.svg) no-repeat;
  width: 10px;
  height: 13px;
}



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

.box01{
border: 3px solid var(--color-red);
border-radius: 10px;
padding: 30px;
}
.box01 .title{
color: var(--color-red);
text-align: center;
font-size: var(--s24);
margin-top: -30px;
margin-bottom: 10px;
font-weight: 600;
position: relative;
}
.box01 .title::before{
content: "";
display: block;
width: 3px;
height: 20px;
top:-60px;
left: 0;
right: 0;
margin: 0 auto;
background-color: var(--color-red);
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.box01{
padding: 20px;
}
.box01 .title{
font-size: var(--s22);
margin-top: -20px;
}
}


.box02{
background-color: var(--color-yellow-light);
padding: 20px;
}






/*-----------------------------------------------------*/
/*---------------------- リスト ----------------------*/
/*-----------------------------------------------------*/
/* 基本 */
.list_template li{
list-style:disc;
margin: 0 0 5px 20px;
}


/* まる */
.list_maru {
list-style: none;
  display: inline-block;
  padding-left: 1rem;
  text-indent: -1rem;
}
.list_maru li {
  margin-bottom: 3px;
  font-size: var(--s16);
  line-height: var(--s26);
}
.list_maru li::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
background-color: var(--color-red);
  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: var(--s16);
  line-height: var(--s26);
list-style: none;
}
.list_number li::before {
margin-left: -1.2rem;
margin-right: 5px;
  font-size: var(--s18);
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: var(--s12);
  line-height: var(--s18);
}
.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;/*文字の垂直そろえを上揃えに*/
}


/*基本のテーブル（青） */
table.table02 th{
background: var(--color-blue-light);
}
table.table02 tr:nth-child(1) th:first-child{
background: var(--color-blue-light);
}



/*-----------------------------------------------------*/
/*---------------------- 下層ページ上部 ----------------------*/
/*-----------------------------------------------------*/
.page_upper{
background-color: var(--color-red);
width: 100%;
height: 200px;
overflow: hidden;
}
.page_upper span{
margin-top: 120px;
display: block;
border-radius: var(--radius);
width: 100%;
height: 100px;
background-color: var(--color-white);
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.page_upper{
height: 130px;
}
.page_upper span{
margin-top: 70px;
border-radius: var(--radius-sp);
}
}




/*-----------------------------------------------------*/
/*---------------------- パンくず -----------------------*/
/*-----------------------------------------------------*/
.breadcrumb {
  margin-bottom: 70px;
}
.breadcrumb-nav {
  font-size:var(--s14);
}
@media screen and (max-width: 768px) {
.breadcrumb {
  margin-bottom: 40px;
}
.breadcrumb-nav {
  font-size:var(--s12);
}
}

.breadcrumb-nav ul {
  display: flex;
}
.breadcrumb-nav li {
  margin-right: 8px;
}
.breadcrumb-nav a {
  text-decoration: none;
}
.breadcrumb-nav a:hover {
  text-decoration: underline;
}
.breadcrumb-nav li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
}





/*-----------------------------------------------------*/
/*---------------------- マージン ----------------------*/
/*-----------------------------------------------------*/
/*上*/
.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);}