@charset "utf-8";
/* CSS Document */

.pt{}
.pc{}
.ps{}
.tb{display: none;}
.ts{display: none;}
.sp{display: none;}

html,body {
margin: 0;
padding: 0;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
font-feature-settings: "palt";
font-size: 18px;
line-height: 200%;
color: #0E1E4F;
background: #FFFFFF;
letter-spacing: 2px;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}

a {
transition: 0.4s;
color: #0E1E4F;
}

a:hover {
opacity: 0.7;
color: #0093E7;
}

img {
margin: 0;
padding: 0;
vertical-align: bottom;
width: auto;
height: auto;
max-width: 100%;
}

ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p {
margin:0;
padding: 0;
list-style: none;
}

p {
text-align: justify;
word-break: break-all;
}

sup {
  vertical-align: super;
  font-size: 0.6em; /* 文字を小さくする */
  line-height: 0;   /* 行の高さを固定して行間が広がるのを防ぐ */
}

#wapper {
overflow: hidden;
}

/*--------------------　header　--------------------*/

header {
height: 95px;
border-top: solid 15px #0E1E4F;
border-bottom: solid 1px #0E1E4F;
display: flex;
justify-content: flex-start;
}

header .logo {
width: 230px;
padding: 0 15px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border-right: solid 1px #0E1E4F;
}

header h1 {
padding: 45px 2% 0 2%;
}

header nav.nav-menu {
width: 640px;
margin-left: auto;
display: flex;
align-items: flex-end;
}

header ul.menu-list {
display: flex;
width: 100%;
}

header li.menu-item {
border-top: solid 1px #0E1E4F;
border-left: solid 1px #0E1E4F;
width: 25%;
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
font-weight: bold;
text-decoration: none;
}

header li.menu-item:last-child {
background: #F0F0F0;
}

header li a {
text-decoration: none;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}

/*--------------------　nav　--------------------*/

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list,
.drop-menu-item:hover .drop-menu-list-child {
  opacity: 1; /* 不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

.menu-item:hover {
background: #0E1E4F;
}

.menu-item:hover a {
opacity: 1;
color: #FFFFFF;
}

.menu-item:last-child:hover a {
opacity: 1;
color: #0093E7;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}

.drop-menu-item {
  position: relative;
  line-height: 160%;
  border-top: solid 1px #0E1E4F;
  background: #0093E7;
}

.drop-menu-item a {
padding: 0 10px;
box-sizing: border-box;
justify-content: center;
align-items: center;
color: #FFFFFF;
text-align: center;
}

.drop-menu-item a:hover {
opacity: 1;
color: #FFFFFF;
background: #2165B4;
}

.drop-menu-list {
  background-color: #FFFFFF; /* ドロップダウンメニューの背景色 */
  left: 0;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 100%;
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: 100%;
  z-index: 2;
  border-bottom: solid 1px #0E1E4F;
  border-left: solid 1px #0E1E4F;
  border-right: solid 1px #0E1E4F;
  margin-left:-1px;
}

/*--------------------　contents共通　--------------------*/

#contents section {
display: grid; 
grid-template-columns: 5.2% 1fr 5.2%;
border-top: solid 1px #0E1E4F;
}

#contents section .inner {
grid-column: 2;
}

#contents section .inside {
padding: 5.2%;
border-left: solid 1px #0E1E4F;
border-right: solid 1px #0E1E4F;
}

#contents section.last .inside {
padding: 2.5%;
}

#contents section.pan {
border-top: none;
background: #F0F0F0;
}

#contents section.pan .inside {
padding: 2.2%;
}

#contents section.pan ul {
display: flex;
}

#contents section.pan li {
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
line-height: 160%;
position: relative;
margin-right: 40px;
}

#contents section.pan li:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20px;
  width: 6px;
  height: 6px;
  margin: auto;
  border-top: 2px solid #0093E7;
  border-right: 2px solid #0093E7;
  transform: rotate(45deg);
  box-sizing: border-box;
}

#contents section.pan li:last-child:after {
  content: none;
}

#contents section.pan li a {
text-decoration: none;
}

#contents section.page_mv .inside {
padding: 0;
position: relative;
}

#contents section.page_mv h2 {
position: absolute;
top: 50%;
left: 5.2%;
transform: translateY(-50%);
color: #FFFFFF;
font-size: clamp(1.5rem, 0.909rem + 2.95vw, 3.125rem);
line-height: 140%;
text-shadow: 00px 0px 8px rgba(0, 9, 56, 1);
white-space: nowrap;
}

#contents section.page_mv h2 p {
font-size: clamp(1rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 100%;
min-width: 300px;
text-align: center;
padding: 15px;
background: #FFFFFF;
color: #0E1E4F;
margin-top: 10px;
text-shadow: none;
}

#contents section.page_mv img {
width: 100%;
height: 600px;
object-fit: cover;
}

#contents section.page_mv .credit {
font-size: clamp(0.625rem, 0.375rem + 0.42vw, 0.875rem);
line-height: 140%;
color: #FFFFFF;
position: absolute;
bottom: 10px;
right: 15px;
text-align: right;
text-shadow: 00px 0px 8px rgba(0, 9, 56, 1);
}

#contents section.page_mv .credit a {
color: #FFFFFF;
text-decoration: none;
}

#contents section.page_t .inside {
padding: 3.5%;
}

#contents section.page_t h3 {
text-align: center;
font-size: clamp(1.5rem, 1.364rem + 0.68vw, 1.875rem);
line-height: 160%;
}

#contents section h4 {
margin-bottom: 30px;
text-align: center;
font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
line-height: 160%;
color: #0093E7;
}

#contents section h5 {
margin-bottom: 20px;
font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
line-height: 160%;
color: #0E1E4F;
}

#contents section h6 {
margin-bottom: 15px;
font-size: 120%;
line-height: 160%;
color: #0E1E4F;
}

#contents section .txt_right {
text-align: right;
}

#contents section .txt_center {
text-align: center;
}

#contents section .mt20 {
margin-top: 20px;
}
#contents section .mt30 {
margin-top: 30px;
}
#contents section .mt40 {
margin-top: 40px;
}
#contents section .mt60 {
margin-top: 60px;
}

#contents section .mb5 {
margin-bottom: 5px;
}
#contents section .mb20 {
margin-bottom: 20px;
}
#contents section .mb30 {
margin-bottom: 30px;
}
#contents section .mb40 {
margin-bottom: 40px;
}
#contents section .mb60 {
margin-bottom: 60px;
}

#contents section .indent {
text-indent: -0.6em;
padding-left: 0.6em;
}

#contents section .indent2 {
text-indent: -1.45em;
padding-left: 1.45em;
}

#contents section .indent3 {
text-indent: -1.1em;
padding-left: 1.1em;
}

#contents section dl.table,
#contents section dl.table dt,
#contents section dl.table dd {
  box-sizing: border-box;
}
#contents section dl.table {
width: 100%;
  border-bottom: 1px solid #ccc;
}
#contents section dl.table dt,
#contents section dl.table dd {
  padding: 15px 0 0 0;
  border-top: 1px solid #ccc;
  line-height: 160%;
}
#contents section dl.table dt {
  width: 8em;
  float: left;
  font-weight: bold;
}
#contents section dl.table dd {
  margin-left: 8em;
  padding-bottom: 15px;
}
#contents section dl.table dd:after {
  content: '';
  display: block;
  clear: both;
}

/*--------------------　contact　--------------------*/

section.contact {
border-top: solid 1px #0E1E4F;
}

section.contact .inner {
margin: 0 5.2%;
padding: 5.2%;
border-left: solid 1px #0E1E4F;
border-right: solid 1px #0E1E4F;
background: #0093E7;
display: flex;
justify-content: space-between;
}

section.contact .inbox1 {
width: 70%;
display: flex;
justify-content: space-between;
}

section.contact .inbox1 h2 {
font-size: clamp(1.875rem, 3.13vw, 3.75rem);
letter-spacing: 0;
color: #FFFFFF;
white-space: nowrap;
line-height: 100%;
}

section.contact .inbox1 .txt {
font-size: clamp(0.75rem, 0.25rem + 0.83vw, 1.25rem);
color: #FFFFFF;
font-weight: bold;
padding-left: 5.2%;
line-height: 200%;
}

section.contact .inbox2 {
width: 30%;
padding-left: 5.2%;
}

section.contact .inbox2 p {
margin: 10px 0;
color: #FFFFFF;
font-weight: bold;
text-align: right;
font-size: clamp(0.75rem, 0.375rem + 0.63vw, 1.125rem);
}

section.contact .inbox2 .btn a {
width: 100%;
height: 80px;
padding-right: 60px;
box-sizing: border-box;
background: #0E1E4F;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
font-size: clamp(0.75rem, 0.375rem + 0.63vw, 1.125rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

section.contact .inbox2 .btn a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 60px;
  height: 100%;
  margin: auto;
  border-right: solid 1px #0093E7;
}

section.contact .inbox2 .btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

section.contact ul {
display: flex;
justify-content: space-between;
padding: 0 5.2%;
}

section.contact ul li {
width: 20%;
border-right: solid 1px #0E1E4F;
border-top: solid 1px #0E1E4F;
}

section.contact ul li:first-child {
border-left: solid 1px #0E1E4F;
}

section.contact ul li img {
width: 100%;
}

section.contact .contact_img {
padding: 0 5.2%;
position: relative;
}

section.contact .contact_img img {
width: 100%;
height: 300px;
object-fit: cover;
}

section.contact .credit {
font-size: clamp(0.625rem, 0.375rem + 0.42vw, 0.875rem);
line-height: 140%;
color: #FFFFFF;
position: absolute;
bottom: 10px;
right: 7%;
text-align: right;
text-shadow: 00px 0px 8px rgba(0, 9, 56, 1);
}

section.contact .credit a {
color: #FFFFFF;
text-decoration: none;
}

/*--------------------　footer　--------------------*/

footer {
border-top: solid 1px #0E1E4F;
}

footer .inbox {
padding: 5.2%;
background: url("../images/f_bg.png") no-repeat top center;
background-size: cover;
display: flex;
justify-content: space-between;
}

footer .f_logo {
width: 30%;
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
}

footer .f_nav {
width: 70%;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}

footer .f_nav ul {
margin-right: 5%;
}

footer .f_nav li {
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
font-weight: bold;
line-height: 160%;
margin-bottom: 15px;
}

footer .f_nav li:first-child {
font-size: clamp(0.875rem, 0.625rem + 0.42vw, 1.125rem);
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: solid 1px #0E1E4F;
}

footer .f_nav li a {
text-decoration: none;
}

footer .copy {
height: 160px;
border-top: solid 1px #0E1E4F;
}

footer .copy ul {
padding: 30px 5.2% 0;
display: flex;
justify-content: space-between;
}

footer .copy li:first-child {
font-size: clamp(0.75rem, 0.5rem + 0.42vw, 1rem);
font-weight: bold;
}

footer .copy li:last-child {
font-size: clamp(0.625rem, 0.375rem + 0.42vw, 0.875rem);
line-height: 160%;
text-align: center;
}

footer .copy li a {
text-decoration: none;
}


/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}

#contents section.page_mv img {
height: 340px;
}

/*--------------------　contact　--------------------*/

section.contact .inbox1 {
width: 60%;
display: block;
}

section.contact .inbox1 .txt {
margin-top: 20px;
padding-left: 0;
}

section.contact .inbox2 {
width: 40%;
}

section.contact .contact_img img {
height: 200px;
}

}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

html,body {
font-size: 100%;
}

/*--------------------　header　--------------------*/

header {
border-top: solid 10px #0E1E4F;
height: 65px;
}

header .logo {
width: 120px;
}

header h1 {
width: 140px;
padding: 16px 3% 0 3%;
}

header nav.nav-menu {
display: none;
}

/*--------------------　contents共通　--------------------*/

#contents section .inside {
padding: 30px;
}

#contents section.last .inside {
padding: 15px;
}

#contents section.pan .inside {
padding: 15px;
}

#contents section.page_t .inside {
padding: 15px;
}

#contents section .txt_center {
text-align: left;
}

#contents section dl.table {
width: 100%;
}

#contents section dl.table dt {
  width: 100%;
  float: none;
}
#contents section dl.table dd {
  margin-left: 0;
  padding: 0 0 15px;
  border-top: none;
}

#contents section.pan {
display: none;
}

#contents section.page_mv {
border-top: none;
}

#contents section.page_mv img {
height: 220px;
}

#contents section.page_mv h2 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

#contents section.page_mv h2 p {
font-size: 45%;
min-width: 220px;
padding: 10px;
margin: 5px auto 0;
}

#contents section h6 {
margin-bottom: 10px;
font-size: 110%;
}

/*--------------------　contact　--------------------*/

section.contact .inner {
display: block;
padding: 30px;
}

section.contact .inbox1 {
width: 100%;
}

section.contact .inbox1 h2 {
text-align: center;
}

section.contact .inbox1 .txt {
margin-bottom: 20px;
}

section.contact .inbox2 {
width: 100%;
padding-left: 0;
}

section.contact .contact_img img {
height: 150px;
}

/*--------------------　sp_nav　--------------------*/

header {
  position: relative;
}

.hamburger {
  position: fixed;
  top: 18px;
  right: 15px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #0E1E4F;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(100%);
  transition: transform .4s;
  z-index: 90;
  overflow-y: auto;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 75px 0 0;
  list-style: none;
}

.nav__item {
text-decoration: none;
border-bottom: solid 1px #0E1E4F;
font-weight: bold;
font-size: 85%;
}

.nav__item:first-child {
border-top: solid 1px #0E1E4F;
}

.nav__item:last-child {
background: #F0F0F0;
}

.nav__item a {
text-decoration: none;
width: 100%;
display: block;
padding: 10px 15px;
box-sizing: border-box;
}

.nav__item ul {
border-top: solid 1px #0E1E4F;
padding: 10px 0 10px 2em;
}

.nav__item ul li {
position: relative;
line-height: 160%;
}

.nav__item ul li:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 6px;
  height: 6px;
  margin: auto;
  border-top: 2px solid #0093E7;
  border-right: 2px solid #0093E7;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/*--------------------　footer　--------------------*/

footer .inbox {
background-size: cover;
}

footer .f_logo {
width: 100%;
}

footer .f_logo img {
width: 60%;
}

footer .f_nav {
display: none;
}

footer .copy ul {
display: block;
text-align: center;
}

footer .copy li:first-child {
margin-bottom: 15px;
}

footer .copy li:last-child {
font-size: 55%;
}

}



