@charset "UTF-8";

:root {
    --font: "Noto Serif JP", serif;
    /* フォントサイズ */
    /* --fs-xl: clamp(2rem, 1.227rem + 2.473vw, 3.7rem); */
    /* --fs-lg: clamp(2rem, 1.545rem + 1.455vw, 3rem); */
    --fs-md: clamp(1.5rem, 1.083rem + 1.333vw, 2rem);
    --fs-sm: clamp(1.2rem, 0.950rem + 0.8vw, 1.5rem);
    --fs-base: clamp(0.9rem, 0.817rem + 0.267vw, 1rem);
    --fs-mini: clamp(0.7rem, 0.609rem + 0.291vw, 0.9rem);
    --fs-xs: clamp(0.6rem, 0.509rem + 0.291vw, 0.8rem);
    /* カラー */
    --c_key: #0332c8;
    --c_yellow: #ffffb7;
}

html,body{
    width: 100%;
	min-width: 1100px;/* タブレット表示見切れ解消 */
}

html {
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #505050;
}
@media screen and (max-width: 768px) {
    html {
        font-size: 90%;
    }
    html,body {
        width: 100%;
        min-width: auto;
    }
}

body {
    overflow-x: hidden;
}


/* --------------------------------------
基本設定
---------------------------------------*/
a {
    text-decoration: none;
    color: #505050;
}
a:hover,a p:hover {
    color: var(--c_key);
}
a img:hover {
    opacity: 0.7;
}
li {
    list-style: none;
}

p.read_text {
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
}
img {
    width: 100%;
    height: auto;
  }

@media screen and (min-width: 768px){
  .sp {
    display: none!important;
  }
}
@media screen and (min-width: 500px) {
  .spsp {
    display: none !important;
  }
}
@media screen and (max-width: 768px){
  .pc {
    display: none!important;
  }
}

/* --------------------------------------
文字
---------------------------------------*/
p {
    font-size: 1rem;
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 150%;
}
p.indent_text {
    padding-left: 1em;
    text-indent: -1em;
}
p.indent_text {
  padding-left: 1em;
  text-indent: -1em;
}
.mini_tx {
  font-size: var(--fs-mini);
}
.xs_tx {
  font-size: var(--fs-xs);
}
.sm_tx {
    font-size: var(--fs-sm);
    font-weight: 600;
}
.md_tx {
    font-size: var(--fs-md);
    font-weight: 600;
}

.center {
  text-align: center;
}
.left {
  text-align: left;
}
.nowrap {
  white-space: nowrap;
}
.wt {
  color: #fff;
}

/* --------------------------------------
セクション・文字幅
---------------------------------------*/
section {
    height: auto;
    width: 100%;
    padding: 100px 0;
}
section.pd10050 {
    height: auto;
    width: 100%;
    padding: 100px 0 50px;
}
section.pd50100 {
    height: auto;
    width: 100%;
    padding: 50px 0 100px;
}
section.pd5050 {
    height: auto;
    width: 100%;
    padding: 50px 0;
}
section.pd0_50 {
    height: auto;
    width: 100%;
    padding: 0 0 50px;
}
section.pd00 {
    height: auto;
    width: 100%;
    padding: 0;
}
.bg_key {
  background-color: var(--c_key);
}
.bg_yellow {
  background-color: var(--c_yellow);
}
.bg_wt {
  background-color: #fff;
}

.relative {
  position: relative;
}
.triangle {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  width: 100px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

.sec_inner {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    margin: auto;
}
.title_center {
    text-align: center;
    margin-bottom: 3rem;
}
.content_800px {
    width: 800px;
    height: auto;
    margin: auto;
}
.content_600px {
    width: 600px;
    height: auto;
    margin: auto;
}
.content_400px {
    width: 400px;
    height: auto;
    margin: auto;
}
@media screen and (max-width: 768px) {
    section,
    section.pd10050,
    section.pd50100 {
        padding: 50px 0;
    }
    .sec_inner {
        width: 96%;
        height: 100%;
        margin: auto;
        /* background-color: rgba(255, 238, 0, 0.411); */
    }
    .content_800px {
        width: 100%;
        height: auto;
        margin: auto;
    }
    .content_600px {
        width: 100%;
        max-width: 600px;
        height: auto;
        margin: auto;
    }
    .content_400px {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: auto;
    }    
}


/* --------------------------------------
 マージン
---------------------------------------*/
.mgn5rem {
    width: 100%;
    height: 5rem;
}
.mgn3rem {
    width: 100%;
    height: 3rem;
}
.mgn2rem {
    width: 100%;
    height: 2rem;
}
.mgn1rem {
    width: 100%;
    height: 1rem;
}
@media screen and (max-width: 768px) {
    .mgn5rem {
        height: 3rem;
    }
    .mgn3rem {
        height: 2rem;
    }
    .mgn2rem {
        height: 1.5rem;
    }
}

/* --------------------------------------
ホワイト背景
---------------------------------------*/
.white_bk {
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.white_bk_title {
    width: 100%;
    text-align: center;
    padding: 100px 0 50px;
}
.white_bk h4.dot_title {
    font-size: 24px;
}
.white_bk_inner {
    width: 800px;
    height: auto;
    margin: auto;
    padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
    .white_bk_title {
        width: 100%;
        text-align: center;
        padding: 50px 0 50px;
    }
    .white_bk_inner {
        width: 90%;
        height: auto;
        margin: auto;
        padding-bottom: 50px;
    }  
}


/* --------------------------------------
仕切り線
---------------------------------------*/
.partition_bar {
    width: 100%;
    height: 1px;
    background-color: #000;
    margin-bottom: 1rem;
}

/* --------------------------------------
カラム設定
---------------------------------------*/
.two_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.two_column_re {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.three_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.two_column_left,
.two_column_right {
    width: calc(50% - 1rem); 
}

@media screen and (max-width: 768px) {
    .two_column_left,
    .two_column_right {
        width: 100%;
    }
}

/* ４カラム */
.four_column_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.four_column_grid li {
  list-style: none;
}
.four_column_grid img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .four_column_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ３カラム */
.three_column_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.three_column_grid img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .three_column_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------
 マージン
---------------------------------------*/
:root {
  --mgn5rem: clamp(3rem, 2.091rem + 2.909vw, 5rem);
  --mgn4rem: clamp(2.5rem, 1.818rem + 2.182vw, 4rem);
  --mgn3rem: clamp(2rem, 1.545rem + 1.455vw, 3rem);
  --mgn2rem: clamp(1.5rem, 1.273rem + 0.727vw, 2rem);
  --mgn1rem: clamp(0.7rem, 0.564rem + 0.436vw, 1rem);
}
.mgn5rem {
    width: 100%;
    height: var(--mgn5rem);
}
.mgn4rem {
  width: 100%;
  height: var(--mgn4rem);
}
.mgn3rem {
  width: 100%;
  height: var(--mgn3rem);
}
.mgn2rem {
  width: 100%;
  height: var(--mgn2rem);
}
.mgn1rem {
  width: 100%;
  height: var(--mgn1rem);
}



/* --------------------------------------
svg
---------------------------------------*/
@media screen and (max-width: 768px) {
  svg {
    width: 100%;
    height: auto;
  }
}


/* --------------------------------------
トップへ戻る
---------------------------------------*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:var(--c_key);
  border: 1px solid #fff;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #fff;
    color: var(--c_key);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}
i.fas.fa-angle-up {
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    /*リンクを右下に固定*/
    #page-top {
        position: fixed;
        right: 10px;
        bottom: 100px;
        z-index: 2;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(200px);
    }

    /*　上に上がる動き　*/
    #page-top.UpMove {
        animation: UpAnime 0.5s forwards;
    }
    @keyframes UpAnime {
        from {
            opacity: 0;
            transform: translateY(200px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*　下に下がる動き　*/
    #page-top.DownMove {
        animation: DownAnime 0.5s forwards;
    }
    @keyframes DownAnime {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 1;
            transform: translateY(200px);
        }
    }
}

/* --------------------------------------
ドロップシャドウ
---------------------------------------*/
.dropshadow {
  -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
}