@charset "UTF-8";


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

:root {

/* ハンバーガーアイコンの高さと幅 */
--hamburger-size:70px;
--hamburger-size-sp:45px;

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


  /*カラー*/
  --color-black: #000;
  --color-gray: #606060;
  --color-gray-light: #F1F1F2;
  --color-white: #fff;
  --color-blue-hi-light:#00FBE6;
  --color-blue-thin:#E7F1F5;
  --color-blue-light:#22CCE7;
  --color-blue:#1AAECD;
  --color-blue-murky:#1480A7;
  --color-blue-murky-dark:#016A86;
  --color-blue-rich:#0D548C;
  --color-blue-dark:#10284C;
  --color-yellow:#FBEB00;
  --color-red:#C1272D;


/*フォントサイズ*/
  --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);
  --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);
  --s150: calc(150 / 16 * 1rem);
  --s200: calc(200 / 16 * 1rem);
}




/*-----------------------------------------------------*/
/*-------------------ベース・リセット---------------------*/
/*-----------------------------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

html {
  font-size: 16px;
  font-weight: 400;
scroll-behavior: smooth;/*スムーズスクロール*/
}

body {
  font-feature-settings: 'palt';/*文字つめ*/
  /* Safari*/
  text-size-adjust: 100%;
  overflow-wrap: anywhere;/*urlもテキスト折る*/
  font-family: var(--font-basic);
  background: var(--color-white);
}

/*
main{overflow:hidden;}*/


/*テクスト選択反転カラー*/
::selection {
  color: var(--color-white);
  background: var(--color-blue);
}
/*Firefox*/
::-moz-selection {
  color:var(--color-white);
  background: var(--color-blue);
}

:where(:any-link, button, [type='button'], [type='reset'], [type='submit'], label[for], select, summary, [role='tab'], [role='button']) {
  cursor: pointer;
}

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;
}

p {
  font-feature-settings: 'palt';/*文字つめ*/
  font-family: var(--font-basic);
line-height: var(--s26);
  padding: 0;
  margin: 0;
  word-wrap: break-word;
}

sub,
sup {
  font-size: 0.6rem;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/*下付き*/
sub {
  bottom: 0;
}

/*上付き*/
sup {
  top: -0.25rem;
}

hr {
  height: 1px;
  background-color: var(--color-black);
  border: none;
  color: var(--color-black);
  margin: 10px 0;
}

a {
  text-decoration: none;
  cursor: pointer;
  outline: none;
color: var(--color-blue);
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

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

/*フォーム系*/
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);
}


/*-----------------------------------------------------*/
/*------------------------コンテンツ--------------------------*/
/*-----------------------------------------------------*/
.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%, 1400px);
  margin-left: auto;
  margin-right: auto;
}

.w800 {width: min(85% ,800px);}


/*2カラム*/
.column-x2 {
  width: min(85%, 1400px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 230px 1fr;
  column-gap: 60px;
}
@media screen and (max-width: 1100px) {
.column-x2 {
  grid-template-columns: 170px 1fr;
  column-gap: 50px;
}
}
@media screen and (max-width: 768px) {
.column-x2 {
  display:block;
}
}






/*-----------------------------------------------------*/
/*---------------------- テキスト ----------------------*/
/*-----------------------------------------------------*/
.txt_red{color: var(--color-red);}

.txt-ja{font-family: var(--font-ja);}
.txt-en{font-family: var(--font-en);}
.txt-hand{font-family: var(--font-en-hand);}



/*-----------------------------------------------------*/
/*-------------------ページ上部の背景---------------------*/
/*-----------------------------------------------------*/
.p_back_gray{
top:0;
right: 0;
position: absolute;
background-color:var(--color-gray-light);
width: 70%;
height: 70svh;
z-index: -999;
}

/* TOP以外 */
#under_page .p_back_gray{
height: 200px;
}
@media screen and (max-width: 768px) {
#under_page .p_back_gray{
height: 130px;
}
}




/*-----------------------------------------------------*/
/*---------------------- パンくず -----------------------*/
/*-----------------------------------------------------*/

.breadcrumb {
  margin-bottom: 100px;
}
.breadcrumb-nav {
  font-size:var(--s14);
}
@media screen and (max-width: 768px) {
.breadcrumb {
  margin-bottom: 50px;
}
.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;
}




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

/*ページタイトル*/
.p_title {
  margin: var(--hamburger-size) var(--hamburger-size) 30px 0;
background-color: var(--color-blue);
color: var(--color-white);
padding: 50px 0;

  clip-path: inset(0 100% 0 0);
  display: block;
  transition: 0.5s cubic-bezier(0.42, 0, 1, 1);
  transition-property: clip-path;
}
.p_title.on {
  clip-path: inset(0);
}

@media screen and (max-width: 768px) {
.p_title {
  margin: var(--hamburger-size-sp) var(--hamburger-size-sp) 30px 0;
padding: 30px 0;
}
}

.p_title .txt-en{
font-size: var(--s50);
display: block;
}
@media screen and (max-width: 768px) {
.p_title .txt-en{font-size: var(--s24);}
}

.p_title .txt-ja{
font-size: var(--s20);
display: block;
}
@media screen and (max-width: 768px) {
.p_title .txt-ja{font-size: var(--s16);}
}




/*項目*/
.title02 {
  margin-bottom: 30px;
}
.title02 .txt-ja {
  display:inline-block;
  font-size: var(--s16);
  color: var(--color-blue);

overflow: hidden;
position: relative;
transition: color 0ms 450ms;
color: transparent;
}
.title02 .txt-ja::after {
  background: var(--color-blue);
  bottom: 0;
  content: '';
  display:inline-block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-100%);
}
.title02 .txt-ja.on {
  color: var(--color-blue);
}
.title02 .txt-ja.on::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
  0% {
    transform: translateX(-100%);
  }
  40%, 60% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media screen and (max-width: 768px) {
  .title02 .txt-ja {
    font-size: var(--s14);
  }
}

.title02 .txt-en {
display: block;
  font-size: var(--s48);
line-height: 3rem;

clip-path: inset(100% 0px 0px 0px);
}
.title02 .txt-en.on{
animation: maskDown 1s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
  .title02 .txt-en {
    font-size: var(--s40);
line-height: 2.5rem;
  }
}



/* 見出し（黒） */
.title01,
.title03 {
  font-size: var(--s34);
  line-height: 3.3rem;
  font-weight: 600;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .title01,
.title03 {
    font-size: var(--s24);
    line-height: var(--s36);
  }
}
@media screen and (max-width: 380px) {
  .title01,
.title03 {
    font-size: var(--s20);
    line-height: var(--s34);
  }
}
.title01 .m-inner,
.title03 .m-inner{
  font-weight: 600;
}


/* 見出し（青） */
.title03 {color: var(--color-blue);}




/* 小見出し（黒） */
.title04,
.title05{
  font-size: var(--s26);
  line-height: 2.7rem;
  margin-bottom: 10px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
.title04,
.title05{
  font-size: var(--s18);
  line-height: 1.9rem;
  margin-bottom: 7px;
}
}
/* 小見出し（青） */
.title05{color: var(--color-blue);}






/* 斜め手書き英字（アニメ付） */
.txt-hand-anime {
  font-family: var(--font-en-hand);
  color: var(--color-yellow);
  font-size: var(--s44);
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); /*回転*/
}
.txt-hand-anime.on {
  clip-path: inset(0);
}
@media screen and (max-width: 768px) {
  .txt-hand-anime {
    font-size: var(--s30);
line-height: 2.5rem;
  }
}











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

/* 黄色◯矢印 */
.bt01 {
  position: relative;
  padding-right: 35px;
  display: inline-block;
  color: var(--color-black);
}
.bt01::after {
  position: absolute;
  top: 0;
  right: 5px;
  content: "";
  display: inline-block;
  width: 25px;
  height: 100%;
  background-image: url(../img/icon/icon_yellow_circle.svg);
  background-position: center;
  transition: 0.3s;
}
.bt01:hover::after {
  right: 0;
}





/* 青線 右向きの矢印 */
.bt02 {
  position: relative;
  padding-left: 20px;
  display: inline-block;
}
.bt02::before {
  position: absolute;
  top: 0;
  left: 0px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%;
  background-image: url(../img/icon/icon_arrow_right.svg);
  background-position: center;
  transition: 0.3s;
}
.bt02:hover::before {
  left: 7px;
}




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


/*外部リンクアイコン*/
.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アイコン*/
.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{
background-color: var(--color-blue-thin);
padding: 20px;
}

/* 青線 */
.box02{
border: 1px solid var(--color-blue);
padding: 20px;
}

/* 薄グレーベタ */
.box03{
background-color: var(--color-gray-light);
padding: 20px;
}






/*-----------------------------------------------------*/
/*--------------------アコーディオン-------------------*/
/*-----------------------------------------------------*/

/*
<details class="ac-box">

<summary class="ac-title">
<h4>あああ</h4>
<div class="change-icon">
<span></span>
</div>
</summary>

<div class="ac-content">
<div class="ac-inner">
あああああ
</div><!--ac_inner-->
</div><!--ac_content-->

</details>
*/

summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*tab操作のみフォーカス*/
summary:focus-visible {
  outline: 2px solid var(--color-blue);
}
summary:hover {
  opacity: 0.6;
}
/*safariのみ矢印非表示*/
summary::-webkit-details-marker {
  display: none;
}

.ac-box{
  overflow: hidden;
display: block;
}

.ac-box .ac-title{
  position: relative;
  width: 100%;
  padding: 10px 20px;
  display: block;
  background: var(--color-gray-light);
}

.ac-box .ac-title h4{
  width: calc(100% - 100px);
  font-size: var(--s22);
  font-weight: 400;
}
@media screen and (max-width: 1100px) {
  .ac-box .ac-title h4{
    font-size: var(--s18);
  letter-spacing: 0;
  }
}

.ac-content .ac-inner{
  padding-top: 30px;
}
@media screen and (max-width: 1100px) {
  .ac-box .ac-content {
    padding: 10px;
  }
}

/* +-アイコン*/
.change-icon{
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  right: 0px;
padding: 0;
}
@media screen and (max-width: 1100px) {
  .change-icon{
    width: 45px;
    height: 100%;
  }
}

.change-icon span::before,
.change-icon span::after{
  content: '';
  width: 20px;
  height: 1px;
  display: block;
  background: var(--color-black);
  transition: transform 0.3s;
  will-change: transform;
}

.change-icon span::before{
  transform: rotate(90deg);
}

/* メニュー展開後の「-」にする　それぞれに追加 */
.ac-box.active .change-icon span::before{
  transform: rotate(180deg);
  animation: close 0.3s ease;
  opacity: 0;
}

/*safariのみアニメーション対策*/
@keyframes close {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }

  100% {
    transform: rotate(180deg);
    opacity: 0;
  }
}





/*-----------------------------------------------------*/
/*----------------- + -アイコン -----------------------*/
/*-----------------------------------------------------*/

.plus{
position: relative;
}
.plus span::before,
.plus span::after {
position: absolute;
top: 48%;
right: -15px;
  content: '';
  width: 10px;
  height: 1px;
display: inline-block;
  background: var(--color-blue);
  transition: transform 0.3s;
  will-change: transform;
}
.plus span::before{
  transform: rotate(90deg);
}
/* メニュー展開後の「-」にする　それぞれに追加 */
.active .plus span::before{
  transform: rotate(180deg);
  animation: close 0.3s ease;
  opacity: 0;
}
/*safariのみアニメーション対策*/
@keyframes close {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }

  100% {
    transform: rotate(180deg);
    opacity: 0;
  }
}




/*-----------------------------------------------------*/
/*----------------- テーブル -----------------------*/
/*-----------------------------------------------------*/

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


/*テーブル（明るい青） */
table.table02 {
border: 1px var(--color-blue) solid;
}
table.table02 th {
padding:7px 10px;
border: 1px var(--color-blue) solid;
color: var(--color-blue);
}
table.table02 td {
border: 1px var(--color-blue) solid;
}


/*テーブル（青ベタ） */
table.table03 {
border: 1px var(--color-blue) solid;
}
table.table03 th {
padding:7px 10px;
border: 1px #E8E8E8 solid;
background: var(--color-blue);
color: var(--color-white);
}
table.table03 td {
border: 1px #E8E8E8 solid;
}


/*テーブル（濃い青ベタ） */
table.table04 {
border: 1px var(--color-blue) solid;
background-color: var(--color-white);
}
table.table04 th {
padding:7px 10px;
border: 1px var(--color-blue) solid;
background: var(--color-blue-murky-dark);
color: var(--color-white);
}
table.table04 td {
border: 1px var(--color-blue) solid;
}


/* SPテーブル横スクロール（scroll-tで囲む）*/
@media screen and (max-width: 768px) {
.scroll-t {
overflow: auto;
white-space: nowrap;
position: relative;
}
.scroll-t::before{
content: "※表は横にスライドできます";
display: inline-block;
margin-bottom: 5px;
position:sticky;
top:0;
left: 0;
}

}









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

/* 基本 */
.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;
  border: 1px solid var(--color-blue);
  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_bullet {
display: flex;
flex-wrap: wrap;
margin-left: -5px;
}
.list_bullet li {
background-color: var(--color-blue);
color: var(--color-white);
padding: 5px 10px;
margin: 5px;
  font-size: var(--s16);
  line-height: var(--s26);
}







/*-----------------------------------------------------*/
/*-------------------ページ内メニュー----------------------*/
/*-----------------------------------------------------*/
.p_menu{
margin-top: 50px;
}
/* ページ内にパンくずあったら詰める */
main:has(.breadcrumb) .p_menu{
margin-top: -50px;
}
@media screen and (max-width: 768px) {
.p_menu{
margin-top: 30px;
}
main:has(.breadcrumb) .p_menu{
margin-top: -30px;
}
}

.p_menu .content{
background-color: var(--color-blue-thin);
padding: 10px 40px;
}
@media screen and (max-width: 768px) {
.p_menu .content{
padding: 10px 20px;
}
}

.p_menu .p_menu-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.p_menu .p_menu-list .item{
margin: 5px 10px;
}
@media screen and (max-width: 400px) {
.p_menu .p_menu-list .item{
font-size: var(--s14);
}
}

.p_menu .p_menu-list .item a{
position: relative;
  padding: 5px 30px 5px 0;
color: var(--color-black);
}
.p_menu .p_menu-list .item a::after{
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%;
  background-image: url(../img/icon/icon_arrow_down.svg);
  background-position: center;
  transition: 0.3s;
}
.p_menu .p_menu-list .item a:hover::after{
top: 5px;
}




/*-----------------------------------------------------*/
/*---------------------- 写真とテキスト ----------------------*/
/*-----------------------------------------------------*/
.ph-txt{
position: relative;
padding: 40px 0;
margin: 80px 0;
}
@media screen and (max-width: 768px) {
.ph-txt{
padding: 30px 0;
margin: 50px 0;
}
}

.ph-txt .ph-txt_wrap{
display:grid;
grid-template-columns: 70% 1fr;
  grid-template-areas:
    "areaA areaB";
}
@media screen and (max-width: 768px) {
.ph-txt .ph-txt_wrap{
display:block;
}
}

/*写真　*/
.ph-txt .ph-txt_wrap .img{
align-self: center;
grid-area: areaA;
}
/*テキスト　*/
.ph-txt .ph-txt_wrap .txt{
align-self: center;
grid-area: areaB;
}
.ph-txt .ph-txt_wrap .txt .txt-wrap{
background-color:var(--color-white);
padding: 30px;
margin-left: -50px;
position: relative;
}
@media screen and (max-width: 768px) {
.ph-txt .ph-txt_wrap .txt .txt-wrap{
margin-left: 0;
padding: 20px;
}
}

.ph-txt .ph-txt_wrap .txt .txt-wrap::before{
content: "";
display: block;
width: 20%;
height: 4px;
top:0;
left: 0;
background-color: var(--color-blue);
position: absolute;
}
/* タイトル */
.ph-txt .ph-txt_wrap .txt .title{
font-size: var(--s20);
color: var(--color-blue);
margin-bottom: 10px;
}
/* 手書き文字 */
.ph-txt .ph-txt_wrap .txt .txt-hand-anime{
position: absolute;
top:-60px;
white-space:nowrap;
}
@media screen and (max-width: 768px) {
.ph-txt .ph-txt_wrap .txt .txt-hand-anime{
top:-45px;
}
}

/* 背景青 */
.ph-txt .back{
position: absolute;
background-color: var(--color-blue-thin);
width: 45%;
height: 100%;
top:0;
bottom: 0;
right: 0;
z-index: -1;
}
@media screen and (max-width: 768px) {
.ph-txt .back{
width: 80%;
}
}


/*------*/
/* 左 */
/*------*/
.ph-txt.p-t-left .ph-txt_wrap{
grid-template-columns: 1fr 70%;
}
/*写真　*/
.ph-txt.p-t-left .ph-txt_wrap .img{
grid-area: areaB;
}
/*テキスト　*/
.ph-txt.p-t-left .ph-txt_wrap .txt{
grid-area: areaA;
}
.ph-txt.p-t-left .ph-txt_wrap .txt .txt-wrap{
margin-left: 0;
margin-right: -50px;
}
@media screen and (max-width: 768px) {
.ph-txt.p-t-left .ph-txt_wrap .txt .txt-wrap{
margin-left: 0;
margin-right: 0px;
}
}
/* 背景青 */
.ph-txt.p-t-left .back{
right: auto;
left: 0;
}





/*-----------------------------------------------------*/
/*------------------2カラムメニュー--------------------*/
/*-----------------------------------------------------*/
.left-menu{
}
.left-menu nav{
position: sticky;
top:30px;
}
@media screen and (max-width: 768px) {
.left-menu nav{
position:initial;
top:0;
margin-top: -30px;
}
}

@media screen and (max-width: 768px) {
.left-menu .left-menu-list{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
margin-bottom: 50px;
}
}

.left-menu .left-menu-list .item{
background-color: var(--color-blue-thin);
padding-right: 10px;
}
@media screen and (max-width: 1100px) {
.left-menu .left-menu-list .item{
font-size: var(--s14);
padding-right: 5px;
margin-bottom: 10px;
}
}

.left-menu .left-menu-list .item a{
display: block;
margin-bottom: 10px;
border-left: 2px solid var(--color-blue-murky);
color: var(--color-black);
padding: 10px 15px;
}
@media screen and (max-width: 768px) {
.left-menu .left-menu-list .item a{
padding: 3px 7px;
height: 100%;
}
.left-menu .left-menu-list .item a.bt01::after {
transform: scale(0.7);
right: 0;
}
}






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