@charset "utf-8";
/*=================================
1: reset-CSS
2: setting
3: header
4: footer
5: common-content
6: top page
7: second page
8: JS
=================================*/


/* =========================================
   MODERN RESET
========================================= */
*,
*::before,
*::after{
	box-sizing:border-box;
}

*{
	margin:0;
}

html{
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}


body{
	min-height:100vh;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}

img,
picture,
video,
canvas{
	display:block;
	max-width:100%;
}
@media(max-width:768px){
	.sec #main img {width:100%; height:auto;}
}
svg{
	display:block;
}

input,
button,
textarea,
select{
	font:inherit;
}

button{
	border:none;
	background:none;
	cursor:pointer;
}

a{
	color:inherit;
	text-decoration:none;
}

ul,
ol{
	list-style:none;
}
::selection{
  background:rgba(120,160,255,.25);
}

@media
(prefers-reduced-motion:reduce){
	*{
		animation:none !important;
		transition:none !important;
		scroll-behavior:auto !important;
	}
}

/* 2: setting
================================== */
/* clearfix*/
.cf:after { content: ""; clear: both; display: block; }
.clear { clear: both;}

/* font */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/NotoSansJP-Regular.woff2') format('woff2'),
  url('../font/NotoSansJP-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: bold;
  font-display: swap;
  src: url('../font/NotoSansJP-Bold.woff2') format('woff2'),
  url('../font/NotoSansJP-Bold.woff') format('woff');
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
}

@media print,
screen and (min-width: 768px) {
  html {
    overflow: auto;
    min-width: 1000px;
  }
}


body {
	font-family: 'Noto Sans JP', sans-serif, 'Yu Gothic', '游ゴシック', '游ゴシック体', YuGothic, Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-style: normal;
	color: #323232;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.7;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact; /* background_print */
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;/* safari_textBold*/
	-webkit-text-size-adjust: 100%;/* safari_textBold*/
	min-width:950px;
}

@media(max-width:768px){
	body {min-width:auto;}
}
img {
	display: block;
	line-height: 0;
	max-width:100%;
	height:auto;
	position:relative;
	z-index:10;
}

.sp_none {display:block;}
.sp_show {display:none;}

@media(max-width:768px){
    .sp_none {display:none;}
    .sp_show {display:block;}	
}

/* var(color) */

:root{
  --main-bl: #1b6a7a;
  --main-gray: #efefef;
  --main-gra: linear-gradient(150deg, rgba(0, 64, 105, 1), rgba(19, 50, 52, 1));
  --main-black:#133234;
  --main-libl:#c7eaef;
}


/* link */
a {
	color:var(--main-bl);
	-webkit-transition: all .2s;
	transition: all .2s;
	text-decoration: none;
}
a:hover {
	color: #1ba3f9;
	text-decoration:underline;
}

.sec #main_contents a:not(.btn)[target="_blank"] {
    position:relative;
    padding-right:15px;
	background:url(../img/icn_blank.svg) no-repeat top right;
}

nav li a[target="_blank"],
#footer a[target="_blank"]{
    position:relative;
    padding-right:15px;
	background:url(../img/icn_blank_w.svg) no-repeat top right;
}


a[href$=".pdf"]::before{
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icn_pdf.svg) no-repeat ;
	background-size:20px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}

a[href$=".doc"]::before,
a[href$=".docx"]::before{
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icn_doc.svg) no-repeat ;
	background-size:20px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}

a[href$=".xlsx"]::before{
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icn_xls.svg) no-repeat ;
	background-size:20px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}

details {
    cursor: pointer;
}

a img {
	-webkit-transition: all .2s;
	transition: all .2s;
}
a img:hover {
	opacity:.7;
}

.inr {
	max-width:1600px;
	margin:0 auto;
    width:95%;
}

#main_contents h2 {
	color:var(--main-black);
	font-size:4rem;
	font-weight:bold;
	position:relative;
	line-height:1.4;
	border-top:solid 2px var(--main-black);
	padding:15px 0;
	z-index:-1;
}

	#main_contents h2::after {
		content:"";
		display:block;
		width:45%;
		height:1px;
		background:var(--main-black);
		margin:0.5em 0 1em 0;
	}

#main_contents h3 {
	position: relative;
	padding-left: 45px;
	color:var(--main-black);
	margin-bottom:1em;
    clear:both;
}
#main_contents h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px; /* 横棒の長さ */
  height: 1px; /* 線の太さ */
  background-color: #333;
  transform: translateY(-50%);
}

@media(max-width:768px){
    #main_contents h3::before {width:20px;}
    #main_contents h3 {padding-left:25px;}
}

#main_contents h4 {
	margin-bottom:1em;
}

.tC {text-align:center!important;}
.tC img {margin:0 auto;}
.tR {text-align:right;}
.mT1em {margin-top:1em!important;}
.mT2em {margin-top:2em!important;}
.mB1em {margin-bottom:1em!important;}
table {border:solid 1px var(--main-black); border-collapse: collapse; margin-bottom:1em;}
table td,table th {border:solid 1px var(--main-black); padding:0.5em;}
@media(max-width:768px){table td,table th{width:auto!important;}}
.block-column li{list-style:disc; margin-left:1em;}
.btn {
	background:var(--main-gra) black;
	color:white;
	display:block;
	width:12em;
	margin:1.5em auto;
	text-align:center;
	padding:0.8em 2em;
	border-radius:25px;
    animation:pulse 3s infinite;
}
.hero .btn{
	border:solid 1px #ccc;
}

@keyframes pulse{
    50%{
        transform:scale(1.03);
    }
}

#main ul {margin-bottom:1em; padding:0;}

.btn:hover {
	color:var(--main-bl);
	background:white;
    border:solid 1px var(--main-bl);
}
.flexbox_wap {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
    justify-content: flex-start;
}
.flexbox_sbwap {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}
.flexbox_cwap {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content: center;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}


.marble-bg {
    position:fixed;
    inset:0;
    overflow:hidden;
    background:linear-gradient(160deg,var(--c1) 0%, var(--c5) 60%, var(--c4) 100%);
    z-index:-1;
}


  :root{
    --c1:#eaf4fc; /* ごく淡いブルー */
    --c2:#cfe6f8; /* パウダーブルー */
    --c3:#bcdcf5; /* ソフトブルー */
    --c4:#e6ecfb; /* うっすらラベンダーがかったブルー */
    --c5:#ffffff;
  }


  /* ぼかした色玉（ブロブ）たち。これが「マーブル」の色の元 */
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    mix-blend-mode:multiply;
    opacity:.75;
    will-change:transform;
  }
  .blob1{
    width:60vw;height:60vw;
    top:-10%; left:-10%;
    background:radial-gradient(circle at 30% 30%, var(--c2), transparent 70%);
    animation:float1 26s ease-in-out infinite;
  }
  .blob2{
    width:55vw;height:55vw;
    top:10%; right:-15%;
    background:radial-gradient(circle at 60% 40%, var(--c3), transparent 70%);
    animation:float2 32s ease-in-out infinite;
  }
  .blob3{
    width:50vw;height:50vw;
    bottom:-15%; left:10%;
    background:radial-gradient(circle at 40% 60%, var(--c4), transparent 70%);
    animation:float3 22s ease-in-out infinite;
  }
  .blob4{
    width:40vw;height:40vw;
    bottom:-10%; right:5%;
    background:radial-gradient(circle at 50% 50%, var(--c2), transparent 70%);
    animation:float4 28s ease-in-out infinite;
  }
  .blob5{
    width:35vw;height:35vw;
    top:35%; left:35%;
    background:radial-gradient(circle at 50% 50%, #ffffff, transparent 70%);
    opacity:.5;
    animation:float5 20s ease-in-out infinite;
  }

  @keyframes float1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(6%,8%) scale(1.08);}
  }
  @keyframes float2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-8%,6%) scale(0.95);}
  }
  @keyframes float3{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(5%,-6%) scale(1.05);}
  }
  @keyframes float4{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-4%,-8%) scale(1.1);}
  }
  @keyframes float5{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    50%{transform:translate(-45%,-55%) scale(1.15);}
  }

  /* マウスで動く層(視差用)。JSでtransformを与える */
  .parallax-layer{
    position:absolute;
    inset:-10%;
    transition:transform .6s cubic-bezier(.2,.6,.2,1);
  }

  /* ===== 大理石の脈理(マーブル模様)を重ねるSVGノイズ ===== */
  .marble-veins{
    position:absolute;
    inset:0;
    opacity:.18;
    mix-blend-mode:overlay;
    pointer-events:none;
  }

  /* うっすら白でハイライトを足して質感アップ */
  .sheen{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.6), transparent 55%);
    pointer-events:none;
  }



/* ==========================================
   HEADER
========================================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px;
}
@media(min-width:768px){
	.site-header{min-width:1000px;}
}

.site-header.scrolled{
    background:linear-gradient(160deg,var(--c1) 0%, var(--c5) 60%, var(--c4) 100%);
}

.logo img{
    display:block;
    max-width:100%;
    height:auto;
}


/* ==========================================
   MENU BUTTON
========================================== */

.menu-trigger{
    display:none;
    align-items:center;
    gap:12px;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--main-bl);
}

.menu-trigger .dots{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.menu-trigger .dots i{
    width:20px;
    height:2px;
    background:var(--main-bl);
    display:block;
    transition:.3s;
}

.menu-trigger.is-open .dots i:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.menu-trigger.is-open .dots i:nth-child(2){
    opacity:0;
}

.menu-trigger.is-open .dots i:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}


/* ==========================================
   NAV
========================================== */
.main-nav>ul{
    display:flex;
    gap:30px;
    margin:0;
    padding:0;
    list-style:none;
}

.main-nav>ul>li{
    position:static;
}

.main-nav>ul>li>a{
    display:block;
    padding:18px 0;
    color:var(--main-black);
    text-decoration:none;
    font-weight:600;
}

.main-nav>ul>li>a:hover,
.home .main-nav>ul>li:first-child a,
.about .main-nav>ul>li:nth-child(2) > a,
.research .main-nav>ul>li:nth-child(3) > a,
.media .main-nav>ul>li:nth-child(4) > a,
.contact .main-nav>ul>li:nth-child(5) > a{
	color:var(--main-bl);
	position:relative;
}

@media(min-width:768px){
.main-nav>ul>li>a:hover::after,
.home .main-nav>ul>li:first-child > a::after,
.about .main-nav>ul>li:nth-child(2) > a::after,
.research .main-nav>ul>li:nth-child(3) > a::after,
.media .main-nav>ul>li:nth-child(4) > a::after,
.contact .main-nav>ul>li:nth-child(5) > a::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	width:10px;
	height:10px;
	border-radius:5px;
	background:var(--main-gra);
	margin: auto;
}
}


/* ==========================================
   MEGA MENU (PC)
========================================== */

.mega-menu{
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    background:var(--main-bl);
    color:#fff;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.25s;
    z-index:1000;
}

.has-mega:hover>.mega-menu,
.has-mega:focus-within>.mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mega-inner{
    max-width:1400px;
    margin:auto;
    padding:60px 40px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:80px;
}

.mega-inner h2{
    margin:0;
    font-size:3.8rem;
    color:#fff;
}

.mega-inner ul{
    list-style:none;
    margin:0;
    padding:0;
}
@media(min-width:768px){
.mega-inner li {
	margin-bottom:10px;
}
}
.mega-inner a{
    color:#fff;
    text-decoration:none;
}

.mega-inner a:hover,
.mega-inner a:focus-visible{
    text-decoration:underline;
}


/* Researchだけ2列 */
.mega-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 60px;
}


/* ==========================================
   ACCESSIBILITY
========================================== */

.main-nav a:focus-visible{
    outline:3px solid #FFD54A;
    outline-offset:4px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){
.site-header{
    padding:5px;
}
.logo {
	width:300px;
	height:auto;
}
.menu-trigger{
    display:flex;
}
.menu-trigger{
    position:relative;
    z-index:10001;
}


/* 開いた状態 */
.menu-trigger.is-open .menu-text{
    font-size:0;
}

.menu-trigger.is-open .menu-text::after{
    content:"CLOSE";
    font-size:14px;
}


/* オーバーレイ */
.menu-overlay{
    position:fixed;
    inset:0;
    background:#fff;
    opacity:0;
    visibility:hidden;
    overflow:auto;
    transition:.3s;
    z-index:999;
    padding:50px 24px 40px;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}

.main-nav {
	margin-bottom:20px;
}

.lang_menu,.staff_menu {
	margin:0 auto 20px auto;
}

body.menu-open{
    overflow:hidden;
}

/* ナビ */
.main-nav>ul{
    display:block;
}

.main-nav>ul>li{
    border-bottom:1px solid var(--main-gray);
}

.main-nav>ul>li>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

/* メガメニューをアコーディオン化 */

.mega-menu{
    position:static;
    width:auto;
    background:none;
    color:var(--main-bl);
    opacity:1;
    visibility:visible;
    transform:none;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s;
}

.mega-menu.open{
    max-height:1200px;
}

.mega-inner{
    display:block;
    padding:0 0 20px;
}

.mega-inner h2{
    display:none;
}

.mega-inner a{
    color:var(--main-bl);
    display:block;
    padding:10px;
}

.mega-grid{
    display:block;
}
}

/* ==========================================
   DESKTOP ONLY
========================================== */

@media (min-width:768px){
.menu-overlay{
    position:static;
    opacity:1;
    visibility:visible;
    overflow:visible;
	display:flex;
	gap:30px;
	align-items:baseline;
	margin-right:1%;
}

}

/* スマホ開閉アイコン */

.nav-toggle{
    display:none;
}


/* スマホのみ表示 */

@media(max-width:768px){
    .main-nav>ul>li>a{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .nav-toggle{
        display:block;
        position:relative;
        width:20px;
        height:20px;
    }


    /* ＋ */
    .nav-toggle::before,
    .nav-toggle::after{
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        background:var(--main-bl);
        transform:translate(-50%,-50%);
    }

    .nav-toggle::before{
        width:16px;
        height:2px;
    }

    .nav-toggle::after{
        width:2px;
        height:16px;
    }

    /* 開いた状態 */
    .has-mega.open .nav-toggle::after{
        display:none;
    }
}


/*==========================================
Search
==========================================*/

.header-search{
    position:relative;
    display:flex;
    align-items:center;
}

/* 虫眼鏡 */
.search-toggle{
    width:44px;
    height:44px;
    border:none;
    background:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.search-toggle svg{
    width:22px;
    height:22px;
    stroke:var(--main-bl);
    stroke-width:2;
    fill:none;
}

/* 検索フォーム */
.search-form{
    position:absolute;
    right:0;
    display:flex;
    align-items:center;
    width:0;
    height:48px;
    overflow:hidden;
    opacity:0;
    background:#fff;
    border:1px solid #d8d8d8;
    border-radius:999px;
    transition:
        width .35s ease,
        opacity .25s ease,
        padding .35s ease;
}

/* 開いた状態 */

.header-search.open .search-form{
    width:300px;
    opacity:1;
    padding-left:20px;
}

/* 入力欄 */
.search-form input{
    width:100%;
    border:none;
    outline:none;
    font-size:15px;
    background:none;
    color:#333;
}

.search-form input::placeholder{
    color:#999;
}

/* Focus */
.search-form:focus-within{
    border-color:var(--main-bl);
    box-shadow:
        0 0 0 4px rgba(13,92,135,.1);
}

.gsc-above-wrapper-area,.gsc-wrapper {max-width:1500px!important;}

/*==========================================
SP
==========================================*/

@media (max-width:768px){
    .header-search{
        width:100%;
        margin:20px 0;
    }

    /* ボタンは不要 */
    .search-toggle{
        display:none;
    }

    /* 常に表示 */
    .search-form{
        position:static;
        width:100% !important;
        height:48px;
        opacity:1 !important;
        overflow:visible;
        padding-left:16px !important;
        border:1px solid #d8d8d8;
        border-radius:999px;
        display:flex;
        align-items:center;
    }

    .search-form input{
        width:100%;
        padding-right:16px;
    }
	.search-icon{
		width:40px;
		display:flex;
		justify-content:center;
		align-items:center;
	}

.search-icon svg{
    width:18px;
    height:18px;
    stroke:var(--main-bl);
    fill:none;
    stroke-width:2;
}
}
.lang_menu {
	display:flex;
	width:110px;
	padding:0;
	align-items:baseline;
}
body:not(.en) .lang_menu li:first-child{
	border-top:solid 2px #000;
	border-left:solid 2px #000;
	border-bottom:solid 2px #000;
	border-radius:20px 0 0 20px;
	font-weight:bold;
	padding:0.2em 1em;
}
.en .lang_menu li:last-child{
	border-top:solid 2px #000;
	border-right:solid 2px #000;
	border-bottom:solid 2px #000;
	border-radius:0 20px 20px 0;
	font-weight:bold;
	padding:0.2em 1em;
}
.en .lang_menu li:first-child a {
	border-top:solid 2px #bcbcbc;
	border-left:solid 2px #bcbcbc;
	border-bottom:solid 2px #bcbcbc;
	border-radius: 20px 0 0 20px;
}
.lang_menu li:last-child a {
	border-top:solid 2px #bcbcbc;
	border-right:solid 2px #bcbcbc;
	border-bottom:solid 2px #bcbcbc;
	border-radius: 0 20px 20px 0;
}
.lang_menu a {
	display:block;
	padding:0.2em 1em;
}
.lang_menu a:hover {
	background:var(--main-gra);
	color:white;
}
.staff_menu {width:130px;}
.staff_menu a {
	display:block;
	padding:0.2em 1em;
	background:var(--main-black);
	color:white;
	text-align:center;
	border-radius:20px;
	border:solid 1px var(--main-black);
}
.staff_menu a:hover {
	background:white;
	color:var(--main-black);
}
#main {
	margin-top:100px;
}
@media(max-width:768px){
	#main {margin-top:80px;}
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  width:95%;
  height:70vh;
  overflow:hidden;
  margin:0 auto 80px auto;
  border-radius:20px;
  isolation:isolate;
}
/* =========================
   文字の背景を自然に暗くする
========================= */
.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(#3ab27e 1px, transparent 1px);
  background-size:90px 90px;
  animation:moveDots 20s linear infinite;
}

@keyframes moveDots{
    from{
        background-position:0 0;
    }
    to{
        background-position:100px 80px;
    }
}
.sec .hero {
    height:200px;
    margin-bottom:10px;
}

@media (max-width:768px){
  .hero{height:calc( 100vh - 180px);}
  .sec .hero {height:150px;}
}

.home .hero::before{
    content:"";
    position:absolute;
    inset:-50%;
    background:
        radial-gradient(circle at 30% 40%,
        rgba(0,255,180,.18),
        transparent 45%),

        radial-gradient(circle at 70% 60%,
        rgba(0,180,255,.3),
        transparent 45%);
    animation:flow 18s linear infinite;
    pointer-events:none;
	z-index:10;
}

@keyframes flow{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}


/* =========================
   背景画像
========================= */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
  border-radius:20px;
  background:url(../img/main-image.jpg) no-repeat center center black;
  background-size:cover;
}

@media(max-width:768px){
	.bg {
		max-width:768px;
		height:150px;
		top:0;
	}
}


/* =========================
   コピー
========================= */
.catchcopy{
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  padding:0;
  background:none;
}
@media(max-width:768px){
	.catchcopy{top:40%;}
	.sec .catchcopy {top:75px;}
}

.catchcopy .title{
  font-size:clamp(40px,4vw,80px);
  line-height:1.15;
  letter-spacing:.04em;
  font-weight:600;
  color:#fff;
  margin-bottom:40px;
  text-shadow:none;
  animation:float 5s ease-in-out infinite;
}

.catchcopy .title span {
    font-size:2.4rem;
    display:block;
}

.sec .catchcopy {
    left:5%;
}

.sec .catchcopy .title {
    font-size:4.8rem;
    margin-bottom:0;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
}

.catchcopy p{
  font-size:clamp(16px,1.6vw,16px);
  line-height:1.8;
  color:#fff;
}
@media(max-width:768px){
.catchcopy .title{
	font-size:clamp(30px,3vw,60px);
}
.catchcopy p{
  font-size:clamp(14px,1.4vw,14px);
  width:90%;
}
.sec .catchcopy .title {
    font-size:3.0rem;
}
.sec .catchcopy .title span {
	font-size:2.0rem;
}
}

#main_contents {
	margin:20px auto;
	padding:1%;
	max-width:1600px;
    width:95%;
}
@media(max-width:768px){
    #main_contents {margin:20px auto;}
}



/* =========================
   Top
========================= */
.home section {
	overflow:hidden;
	max-width:1600px;
}
.home .block-column {
	width:50%;
	float:right;
	margin-top:-120px;
}

@media(max-width:768px){
    .home .block-column {
        width:100%;
        float:none;
        margin-top:-20px;
    }
}

.home .btn {
	margin:1.5em 0 0 0;
}
@media(max-width:768px){
    .home .btn {margin:1em auto;}
}
.home .news-block .btn {
	margin:0 auto;
}
.wp-block-group {
	overflow:hidden;
	margin-bottom:80px;
}

.sec .wp-block-group {
    margin-bottom:50px;
}
@media(max-width:768px){
    .wp-block-group {margin-bottom:20px;}
}


.fade-card{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .7s ease,
        transform .7s ease;
    transition-delay:var(--delay,0s);
}

.fade-card.show{
    opacity:1;
    transform:none;
}
.fade-card:nth-child(1){ transition-delay: .0s; }
.fade-card:nth-child(2){ transition-delay: .1s; }
.fade-card:nth-child(3){ transition-delay: .2s; }
.fade-card:nth-child(4){ transition-delay: .3s; }
.fade-card:nth-child(5){ transition-delay: .4s; }
.fade-card:nth-child(6){ transition-delay: .5s; }
.fade-card:nth-child(7){ transition-delay: .6s; }
.fade-card:nth-child(8){ transition-delay: .7s; }

#main .center_block ul {
	margin:0 auto 80px auto;
	padding-left:0;
}

.center_block li {
	list-style:none;
	padding:0;
	width:calc( 100%/4 - 50px);
	margin:1em 25px 1em 25px;
	background:white;
	padding:1em;
}

@media(max-width:768px){
    .center_block li {width:100%;}
}

.center_block a {
	color:black;
}
.center_block img {
	border-radius:10px;
}
.fade-card.-body {
	margin:10px;
}
.center_name {
	font-weight:bold;
	margin-top:5px;
}
.center_block p {
	font-size:1.5rem;
	margin-bottom:0;
}

.img-box{
    overflow:hidden;
    position:relative;
}
.img-box img{
    display:block;
    width:100%;
    height:auto;
    transition:
        transform .6s ease,
        filter .6s ease;
}

/* ===========================
   Hover
=========================== */

.center_block li:hover,
.center_block li:focus-visible{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.center_block li:hover .img-box img,
.center_block li:focus-visible .img-box img{
    transform:scale(1.08);
    filter:brightness(1.05);
}

.center_block li:hover .fade-card.-body,
.center_block li:focus-visible .fade-card.-body{
    transform:translateY(-4px);
}

.center_block li:focus-visible{
    outline:3px solid #00a7c4;
    outline-offset:4px;
}

.news-block {
	margin-bottom:80px;
	overflow:hidden;
}

#main_contents .news-block h2::after {
	width:20%;
}
.block-column-left {
	width:20%;
	float:left;
}
.news-block .block-column {
	width:75%;
	margin-top:-130px;
}

@media(max-width:768px){
    .news-block .block-column {width:100%; margin-top:-20px; float:none;}
    .block-column-left {float:none; width:100%; margin-top:20px;}
}
.news-block dl,.news .block-column dl {
	border-bottom:solid 1px var(--main-gray);
	padding:10px;
}
.news-block dt,.news .block-column dt {
	font-weight:bold;
}
.news-block dt span,.news .block-column dt span {
	color:var(--main-bl)
}
.news-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
    text-decoration:none;
    color:#222;
    transition:.3s;
}

.news-link dl{
    flex:1;
    margin:0;
}

.circle-btn{
    flex-shrink:0;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #47c79b,
        #0f4f77
    );
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

/* 矢印 */
.circle-btn::before{
    content:"";
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform:rotate(45deg);
}

#link_banner {
	background:white;
	padding:1em;
}

ul.banner {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	margin-bottom:0;
	padding:0;
}

ul.banner li {width:calc( 100%/5 - 20px)}

@media(max-width:768px){
    ul.banner li {width:calc(100%/3 - 20px)}
}
@media(max-width:600px){
    ul.banner li {width:calc(100%/2 - 20px)}
}
@media(max-width:420px){
    ul.banner li {width:100%}
	ul.banner li img {margin:0 auto 10px auto}
}
.banner img {border:solid 1px var(--main-gray)}


/* =========================
   Footer
========================= */
#footer {
	background:var(--main-black);
	color:white;
}
#footer .inr {
	padding:80px 0;
}

@media(max-width:768px){
    #footer .inr {padding:40px 0;}
}

#footer a {
	color:white;
}

.logo_space {
	width:35%;
}

.f_menu {
	gap:30px;
	width:64%;
}
.f_menu dt {
	font-weight:bold;
	margin-bottom:10px;
}

.f_menu dd {
	padding-left:1em;
	border-left:solid 1px white;
}
.footer-sub{
    display:flex;
    flex-direction:column;
    gap:30px;
}

#footer .flexbox_sbwap {
	width:100%;
	margin-top:1em;
}

.policy {
	margin-right:50px;
}
.policy li {
	margin:0 1em;
}


@media(max-width:768px){
	.footer_menu {display:block;}
	.logo_space {width:100%; text-align:center;}
	.f_menu {display:none;}
	.logo_space img {margin:0 auto;}
	#copy p {text-align:center; order:2; width:100%;}
	.policy {justify-content:center; order:1; width:100%;}
}

.pageTop{
    opacity:0;
    visibility:hidden;
    transform:
        translateY(20px);
    transition:
        opacity .3s,
        visibility .3s,
        transform .3s;
    z-index:999;
}

.pageTop.show{
    opacity:1;
    visibility:visible;
    transform:
        translateY(0);
}
.pageTop{
    position:fixed;
    right:40px;
    bottom:40px;
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--main-gra);
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-position .5s ease;
    background-size:200% 100%;
}
/* 矢印 */
.pageTop::before{
    content:"";
    position:absolute;
    top:18px;
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    transform:rotate(45deg);
}
/* TOP文字 */
.pageTop .label{
    margin-top:18px;
}

@media(max-width:768px){
    .pageTop{right:10px; bottom:10px; width:40px; height:40px;}
    .pageTop::before{top:7px;}
    .pageTop .label {margin-top:15px; font-size:1.0rem;}
}

/* Hover */
.pageTop:hover{
    transform:translateY(-6px);
    background-position:right center;
    box-shadow:0 18px 36px rgba(0,0,0,.22);
}

/* Hover時は矢印も少し上へ */
.pageTop:hover::before{
    transform:
        translateY(-3px)
        rotate(45deg);
}

/* Focus */
.pageTop:focus-visible{
    outline:3px solid #FFD54A;
    outline-offset:4px;
}

.pageTop::after{
    content:"";
    position:absolute;
    inset:-6px;
    border:1px solid rgba(71,199,155,.35);
    border-radius:50%;
    opacity:0;
    transform:scale(.9);
    transition:.3s;
}

.pageTop:hover::after{
    opacity:1;
    transform:scale(1);
}


.contact-float {
	position: fixed;
	left: 25px;
	bottom: 25px;
	width: 320px;
	padding: 25px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0,0,0,.15);
	z-index: 9999;

	/* 初期状態 */
	opacity: 0;
	transform: translateY(30px);
	visibility: hidden;

	transition:
		opacity .4s ease,
		transform .4s ease;
}

.contact-float .btn {
    margin-bottom:0;
}

/* 表示 */
.contact-float.is-show {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* 非表示 */
.contact-float.is-hide {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

.contact-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: none;
	background: #f2f2f2;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: .2s;
}

.contact-close:hover {
	background: #ddd;
}
.contact-title h2 {
    font-size:2.0rem;
}

@media (max-width: 767px) {
	.contact-float{
		left:15px;
		right:15px;
		bottom:15px;
		width:auto;
	}
}

/* =========================
   2階層目-共通
========================= */
#bread_list ul {
    margin:0;
    padding:0;
}
#bread_list li {
    position:relative;
    margin-right:10px;
}
#bread_list li:not(:last-child) ::after{
    content:"●";
    font-size:1.2rem;
    margin-left:10px;
    pointer-events:none;
}

.center #main_contents {
    display:flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}
.left_contents {
    background:white;
    padding:15px;
    border-radius:20px;
}

.left_contents img {
    border-radius:20px;
}

@media(max-width:768px){
    .left_contents img {display:none;}
}

#main .left_contents ul{
    padding:0;
}
.left_contents li {
    border-bottom:solid 1px var(--main-bl);
    padding:10px;
}
.left_contents a {
    display:block;
    padding-left:15px;
    position:relative;
}
.left_contents a::before {
    content:"●";
    font-size:1.2rem;
    color:var(--main-bl);
    position:absolute;
    top:5px;
    left:0;
}

@media(min-width:768px){
    .center .wp-block-group {
        width:calc(100% - 280px);
    }
    .left_contents {
        width:250px;
        margin-right:30px;
    }
}
@media(max-width:768px){
    .center #main_contents {
        flex-direction: column;
        flex-direction: column-reverse;
    }
}
.center_link {
    float:right;
    margin-top:0;
    padding:0 1em;
}

@media(min-width:768px){
    .center_link {
        margin-top:-110px;
        margin-right:10px;
    }
}
@media(max-width:768px){
    .center_link .btn {margin-top:0;}
}

.sec #main_contents h2 {font-size:2.6rem;}
.sec h3 {
	font-size:2.0rem;
	padding:0.5em 0;
	margin-bottom:0.5em;
}
.sec h4 {
	font-size:1.8rem;
	padding:0.2em;
	margin-bottom:0.2em;
    background:white;
}
	.sec h4::before {
		content:"●";
		color:var(--main-bl);
		margin-right:5px;
        margin-top:-5px;
		font-size:1.2rem;
	}
.sec h5 {
    font-size:1.7rem;
    font-weight:bold;
    margin-bottom:0.7em;
    position:relative;
}
.sec h5::before {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 60px;
  height: 3px;
  content: '';
  border-radius: 2px;
  background:var(--main-bl);
}
.sec h6 {
	font-size:1.6rem;
	font-weight:bold;
	margin-bottom:0.5em;
	margin-top:0.5em;
}

.sec section p {margin-bottom:1em;}

.block-img {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
    justify-content: flex-start;
	margin-bottom:1em;
}

.block-img img {
    margin:0 auto;
	max-width:1000px;
	width:100%;
	height:auto;
}

.block-img ul {
	display:flex;
	gap:20px;
	align-items:center;
}
.block-img li {
	width:calc(100%/2 -20px);
	margin:0 10px;
}

@media(max-width:768px){
    .block-img ul {display:block;}
	.block-img li {width:100%;}
	.block-img img {margin-bottom:1em;}
}

.block-member {
    background:var(--main-libl);
    padding:24px;
    margin-bottom:50px;
}

.member-list{
  columns:2;
  column-gap:50px;
}
@media(max-width:768px){
    .member-list{ columns:1;}
}
.member-list dl {
	display:flex;
	border-bottom:solid 1px var(--main-bl);
	padding:0.5em;
}

.member-list dt {width:8em}

.block-data {
    background:var(--main-gray);
    padding:24px;
    margin-bottom:50px;
}

.block-data ul,
.member-list ul {
    padding:0;
}

.block-data li,
.member-list li  {
	border-bottom:solid 1px var(--main-bl);
	padding:0.5em;
}

.sec #main_contents .block-link li {
    margin:0 10px 10px 10px;
}

.sec #main_contents .block-link li a[target="_blank"]{
    border:solid 1px var(--main-gray);
    display:block;
    padding:0;
}
.sec #main_contents .block-link li a::after {
    display:none;
}

.aisatsu .flexbox_wap,.aboutus .flexbox_wap {flex-direction: row-reverse;}
.aisatsu .flexbox_wap .block-column {width:calc(100% - 380px); margin-right:20px;}
.photo {width:360px;}
.name {font-weight:bold; font-size:2.8rem;}
.name span {margin-left:0.5em; font-size:1.8rem; color:#6b6b6b;}

.photo2 {width:600px;}
.aboutus .block-column {width:calc(100% - 620px); margin-right:20px;}

@media(max-width:768px){
    .aisatsu .flexbox_wap,.aboutus .flexbox_wap {display:block;}
    .aisatsu .flexbox_wap .block-column,.photo,.aboutus .block-column,.photo2 {width:100%; margin:0 auto;}
}

.block-box {
    background:white;
    padding:1em;
}

.form_frame {
	border:0;
	width:100%;
	height:900px;
}

.ggmap iframe {
	width:100%;
	height:450px;
	border:0;
}
.ggmap {width:100%;}

@media(min-width:768px){
	.ggmap {width:49%; margin-right:2%;}
	.emap {width:49%;}
}