@charset "UTF-8";

/*
Theme Name: hyeg
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.5.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
@import url('./layout.css?1');

/* Variables */
:root {
	--global--color--blue: #014099;
  --global--color--yegblue: #325e9b;
  --global--color--clearblue: #94afd5;
  --global--color--gray: #333333;
  --global--color--semigray: #5d5d5d;  
  --global--color--lightgray: #e5e5e5;
  --global--color--pink: #b31255;
  --global--color--deeppink: #cd0061;
  --global--color--lightpink: #f7c2db;
  --global--color--white: #ffffff;
  --global--color--buttonblue: #3d6cae;
  --global--color--black: #000000;
  --global--color--green: #59beb4;


  --header--width--sp: 8rem;

  --pc--header-height: 8rem;

  --font--weight--regular: 400;
  --font--weight--medium: 500;
  --font--weight--bold: 700;
}

.mincho{
  font-family: "Chiron Sung HK", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.eng, .eng *{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.txt-blue{ color: var(--global--color--blue) !important; }
.txt-gray{ color: var(--global--color--gray) !important; }
.txt-bold{ font-weight: var(--font--weight--bold); }


.inner{ max-width: 109rem; margin: 0 auto; padding: 0 1rem; }

.disnone{ display: none !important; }

body{
  overflow-x: hidden;
}


.anchor{
  position: absolute;
  margin-top: -8rem;
  padding-top: 8rem;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background: var(--global--color--blue);
}
::-webkit-scrollbar-track {
    background: transparent;
}


h2.title{
  display: flex;
  height: 15rem;
  justify-content: center;
}
h2.title .tit{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: var(--font--weight--bold);
  padding: 0 3rem;
  position: relative;
  color: var(--global--color--blue);
}
h2.title .tit span{
  font-size: 1.8rem;
  color: var(--global--color--pink);
  z-index: 1;
}
h2.title .tit::before{
  content: "";
  width: 11.9rem;
  height: 14.3rem;
  background: url(./assets/images/title_bg.svg) no-repeat 50% 0 / 15.9rem auto;
  position: absolute;
  left: 0;
}






h3.title{
  display: flex;
  height: 6rem;
  justify-content: center;
  color: var(--global--color--blue);
  font-size: 3.2rem;
  font-weight: var(--font--weight--bold);
  letter-spacing: 1rem;
  position: relative;
}
h3.title::after{
  content: "";
  width: 21.5rem;
  height: .1rem;
  background: var(--global--color--lightpink);
  position: absolute;
  left: calc(50% - 10.75rem);
  bottom: 0;
}



.main .logo-wrapper{
    display: flex;
    width: 100%;
    height: calc(100vh - 10rem);
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.main .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-top: -6vh;
}

.main .logo img.bg{
    max-width: 100rem;
    height: calc(100vh - 19rem);
    margin-right: 10rem;

}

.main .logos{
    position: absolute;
    display: flex;
    margin-top: -25vh;
    max-width: 45vh;
}
.main .logos img{
  width: 100%;
}

.main .countdown{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    bottom: 8.5vh;
    align-items: center;

}
.main .countdown p.txt{
  color: var(--global--color--blue);
  font-size: 3.5vh;
  letter-spacing: .3rem;
  margin-bottom: 1vh;
  font-weight: var(--font--weight--bold);
  text-shadow    : 
       2px  2px 1px var(--global--color--white),
      -2px  2px 1px var(--global--color--white),
       2px -2px 1px var(--global--color--white),
      -2px -2px 1px var(--global--color--white),
       2px  0px 1px var(--global--color--white),
       0px  2px 1px var(--global--color--white),
      -2px  0px 1px var(--global--color--white),
       0px -2px 1px var(--global--color--white);
}

.main .countdown .time-container{
  display: flex;
  justify-content: center;
  background-color: var(--global--color--white);
  background-image: radial-gradient(circle, #7e9bc3 1px, transparent 1px);
  background-position: 0 0;
  background-size: 3px 3px;
  height: 12vh;
  align-items: center;
  border-radius: 2rem;
  color: var(--global--color--blue);
  padding: 0 2rem;
  z-index: 1;
}
.main .countdown .time-days{
  display: flex;
  flex-direction: column;
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: var(--global--color--lightgray) .2rem solid;
  font-weight: var(--font--weight--bold);
  font-size: 1.4rem !important;
  text-align: center;
}


.main .countdown .time-times{
  font-size: 1.4rem !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  font-weight: var(--font--weight--bold);

}

.main .countdown .time-days span{
    font-size: 6.7vh !important;
  line-height: 1;
  font-weight: var(--font--weight--bold);
}


.main .countdown .time-times span{
    font-size: 6.7vh !important;
  line-height: 1;
  font-weight: var(--font--weight--bold);
}


.main .countdown .time{
  display: flex;
}
.main .countdown .time,
.main .countdown .time span{
  font-size: 7.7rem;
}
.time-num{
  display: flex;
  justify-content: center;
  width: 9.2rem;
}



.cover{
  background: url('./assets/images/bg01.svg') no-repeat 50% 50% / cover;
}




section.president{
  position: relative;
}
.president::before{
  content: "";
  position: absolute;
  width: 81.2rem;
  height: 73.8rem;
  background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
  top: 18rem;
  left: -30rem;
  z-index: -1;
}

section.president .president-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 5rem;
  padding: 5rem;
  height: 80rem;
  overflow-y: scroll;
  border-radius: 2rem;
  background-color: rgba(247, 247, 247, .8);
}
.president-list dl{
  width: 23.5%;
  margin-right: 2%;
}
.president-list dl dt img{
  max-width: 100%;
}
.president-list dl dd span{
  color: var(--global--color--deeppink);
}

.president-list dl dd{
  margin-top: 3rem;
  font-size: 2.0rem;
  font-weight: var(--font--weight--bold);
  color: var(--global--color--blue);
  text-align: center;
  margin-bottom: 4rem;
}
.president-list dl dd span{
  font-size: 1.4rem;
  font-weight: var(--font--weight--medium);
  display: block;
  color: var(--global--color--deeppink);
  line-height: 1;
  margin-bottom: .3rem;
}
.president-list dl dd .company{
  font-weight: var(--font--weight--medium);
  display: block;
  font-size: 1.4rem;
}




.stepbar-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.stepbar {
  margin: 0 auto;
  display: inline-block;
  position: relative;
}

.stepbar .stepbarwrap {
  margin: 2rem 0 7rem;
  position: relative;
}
.stepbar .stepbarwrap-end{
  margin-bottom: 0;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  content: "";
  border-radius: 50%;
  background-color: var(--global--color--blue);
  color: #fff;
  text-align: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
  display: inline-block;
  line-height: 1.2em;
  font-size: 0.8em;
  font-weight: bold;
  position: relative;
  top: 0.9em;
}

.stepbar .stepbarwrap .steptitle .title {
  margin: 0.5rem 0 0.5rem 3rem;
  font-weight: bold;
  font-size: 2.2rem;
  color: var(--global--color--blue);
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 7rem;
  display: block;
  line-height: 1.5;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-weight: var(--font--weight--bold);
  color: var(--global--color--gray);
}

.stepbar .stepbarwrap .stepline {
  width: .2rem;
  height: calc(100% + 7rem);
  background-color: var(--global--color--blue);
  position: absolute;
  top: 1rem;
  left: calc(2rem - .1rem);
  z-index: 0;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}












section.about .inner{
  padding-bottom: 10rem;
  background-color: var(--global--color--white);
}
section.about h3{
  color: var(--global--color--blue);
  font-weight: var(--font--weight--bold);
  font-size: 2.8rem;
}
section.about h3 span{
  font-size: 2rem;
}


section.about{
  position: relative;
}

section.about::before{
  content: "";
  position: absolute;
  width: 30.4rem;
  height: 36.8rem;
  background: url('./assets/images/bg02.svg') no-repeat 50% 50% / 30.4rem auto;
  top: -12rem;
  right: -12rem;
  z-index: 1;
  transition: .5s all;
}
section.about::after{
  content: "";
  position: absolute;
  width: 30.4rem;
  height: 36.8rem;
  background: url('./assets/images/bg02.svg') no-repeat 50% 50% / 30.4rem auto;
  bottom: 12rem;
  left: -8rem;
  z-index: 1;
  transition: .5s all;
}



.profile{
  max-width: 60rem;
  background-color: var(--global--color--blue);
  padding: 1.5rem;
  border-radius: 2rem;
  margin-top: .5rem;
  display: flex;
}

.profile .photo{
  max-width: 20rem;
  overflow: hidden;
}
.profile .photo img{
  width: 100%;
  overflow: hidden;
  border-radius: 2rem;
}
.profile .photo span{
  display: block;
  text-align: right;
  font-size: 1.4rem;
  color: var(--global--color--white);
}

section.about .name{
  font-weight: var(--font--weight--bold);
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

section.about .name .photo{
  width: 10rem;
  margin-right: 2rem;
}




section.about .texts{
  width: calc(100% - 20rem);
  margin-left: 2rem;
    height: 28rem;
    overflow-y: scroll;
    font-size: 1.4rem;
    padding-right: .5rem;
    color: var(--global--color--white);
}




section.about .texts::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
section.about .texts::-webkit-scrollbar-thumb {
    background: var(--global--color--white);
    border-radius: 2rem;
}
section.about .texts::-webkit-scrollbar-track {
    background: transparent;
}







header{
  position: fixed;
  width: 100%;
  height: var(--pc--header-height);
  z-index: 100;
  background-color: rgba(255, 255, 255, .9);
}
header .header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--pc--header-height);
  padding: 0 3rem;
}
header .menu ul{
  display: flex;
}
header .menu ul li:not(:last-child){
  margin-right: 2rem;
}
header .menu ul li a{
  color: var(--global--color--blue);
  font-weight: var(--font--weight--bold);
  position: relative;
}
header .menu ul li a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: var(--global--color--blue);
  bottom: -.7rem;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
header .menu ul li a:hover::after {
  transform: scale(1, 1);
}





section.main{
  width: 100%;
  height: calc(100vh - 10rem);
  background: url('./assets/images/main_bg.webp') no-repeat 0 0 / cover;
  position: relative;
}

  
section.main .town{
  position: absolute;
  bottom: 0;
  width: 100%;
}
section.main .town img{
  width: 100%;
}






section.news .inner{
  display: flex;
  padding: 5rem 3rem 7rem;
  background-color: var(--global--color--white);
}
section.news h2{
  width: 15rem;
  font-size: 2.6rem;
  font-weight: var(--font--weight--bold);
  color: var(--global--color--blue);
  letter-spacing: .3rem;
  padding-top: 2rem;
}
section.news .news-list{
  width: calc(100% - 15rem);
}

section.news .news-list .news-article dl dt{
  display: block;
  font-size: 1.4rem;
  font-weight: var(--font--weight--regular);
  color: var(--global--color--gray);
}
section.news .news-list .news-article dl dd{
  color: var(--global--color--blue);
  font-weight: var(--font--weight--bold);
  display: flex;
  justify-content: space-between;
}


section.news .news-list .news-article{
  padding: 2rem 0;
  border-bottom: var(--global--color--lightgray) .1rem solid;
}

.arrow {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 3px;
}

.arrow::before,
.arrow::after{
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 1rem;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--global--color--black);
  transform-origin: calc(100% - 1px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}




/*------------------------- Excursion -------------------------*/
section.excursion{
  margin-top: 10rem;
  margin-bottom: 10rem;
}
section.excursion .excursion-inbox{
  display: flex;
  justify-content: space-between;
  margin-top: 9rem;
}

section.excursion .excursion-inbox .image{
  width: 42.7rem;
}
section.excursion .excursion-inbox .excursion-information{
  width: calc(100% - 42.7rem - 8rem);
}
section.excursion .excursion-inbox .excursion-information h3{
  font-size: 2.8rem;
  font-weight: var(--font--weight--bold);
  color: var(--global--color--blue);
  margin-bottom: 4rem;
}
section.excursion .excursion-inbox .excursion-information h3 span{
  display: block;
  font-size: 1.4rem;
  font-weight: var(--font--weight--medium);
  color: var(--global--color--semigray);
}


section.excursion .button{
  display: flex;
  justify-content: flex-end;
  margin-top: 4rem;
}
section.excursion .button a {
    position: relative;
    color: var(--global--color--white);
    display: flex;
    width: 30rem;
    justify-content: center;
    align-items: center;
    height: 5.6rem;
    font-size: 1.8rem;
}
section.excursion .button a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: var(--global--color--blue);
    transform: skewX(-15deg);
    border: var(--global--color--blue) .2rem solid;
   transition: .5s all;
}

section.excursion .button a:hover{
    color: var(--global--color--blue);

}
section.excursion .button a:hover::before{
  background-color: var(--global--color--white);
    transform: skewX(0deg);
}


section.about h3{
  display: block;
  text-align: center;
}
section.about h3 span{
  display: block;
}






/*------------------------- Sponcer -------------------------*/


section.sponcer{
  position: relative;
}


section.sponcer .buttonss{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
section.sponcer .buttonss a{
  display: flex;
  width: 45rem;
  align-items: center;
  justify-content: center;
  height: 7rem;
  border: var(--global--color--green) .2rem solid;
  border-radius: 5rem;
  color: var(--global--color--green);
}
section.sponcer .buttonss a i{
  margin-right: .5rem;
}

section.sponcer .buttonss a:hover{ background-color: var(--global--color--green); color: var(--global--color--white); }

section.sponcer .town{
  position: absolute;
  bottom: 0;
  width: 100%;
}
section.sponcer .town img{
  width: 100%;
}

section.sponcer .inner{
  padding-bottom: 15rem;
}
section.sponcer .sponcer-inbox{
  margin-top: 5rem;
}

.banner-a ul,
.banner-big ul,
.banner-middle ul,
.banner-small ul{
  display: flex;
  flex-wrap: wrap;
}
.banner-small ul{
  justify-content: center;
}



.banner-a ul li{
  margin-right: 2%;
  margin-bottom:2%;
  width: 32%;
}
.banner-a ul li:nth-child(3n){
  margin-right: 0;
}

.banner-a ul li a{
  display: flex;
}
.banner-a ul li a img{
  width: 100%;
}


.banner-big ul li{
  margin-right: 2%;
  margin-bottom: 2%;
  display: flex;
  width: 32%;
}
.banner-big ul li:nth-child(3n){
  margin-right: 0;
}
.banner-big ul li a img{
  width: 100%;
}

.banner-middle ul li{
  margin-right: 2%;
  margin-bottom: 2%;
  display: flex;
  width: 23.5%;
}
.banner-middle ul li:nth-child(4n){
  margin-right: 0;
}
.banner-middle ul li a img{
  width: 100%;
}

.banner-small ul li a{
  display: flex;
  padding: .5rem 1rem;
}


section.sponcer .sponcer-inbox ul li a{
  overflow: hidden;
}
section.sponcer .sponcer-inbox ul li a img{
  transition: .5s all;
}
section.sponcer .sponcer-inbox ul li a:hover{
  color: var(--global--color--blue);
}
section.sponcer .sponcer-inbox ul li a:hover img{
  transform: scale(1.1);
  transition: .5s all;
}










/*------------------------- Greeting -------------------------*/
section.greeting{
  position: relative;
}
section.greeting .message{
  line-height: 2.2;
  background-color: rgba(255, 255, 255, .8);
}

section.greeting dl{
  margin: 8rem 0 5rem;
  text-align: center;
}

section.greeting dl dd{
  margin-top: 4rem;
  font-size: 2.6rem;
  font-weight: var(--font--weight--bold);
}
section.greeting dl dd span{
  font-size: 1.6rem;
  font-weight: var(--font--weight--regular);
  display: block;
  color: var(--global--color--blue);
  line-height: 1;
}

.greeting-chairman{
  margin-bottom: 9rem;
}

.greeting-chairman::after{
  content: "";
  position: absolute;
  width: 81.2rem;
  height: 73.8rem;
  background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
  bottom: -12rem;
  right: -55rem;
  z-index: -1;
}


.greeting-leader::before{
  content: "";
  position: absolute;
  width: 81.2rem;
  height: 73.8rem;
  background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
  top: 32rem;
  left: -40rem;
  z-index: -1;
}

.greeting-leader::after{
  content: "";
  position: absolute;
  width: 81.2rem;
  height: 73.8rem;
  background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
  bottom: -32rem;
  right: -40rem;
  z-index: -1;
}


.greeting-leader .inner{
  padding-bottom: 10rem;
}


section.magazine{
  margin-bottom: 17rem;
}


section.magazine .magazine-list{
  display: flex;
  justify-content: space-between;
  margin-top: 6rem;
}

section.magazine .magazine-list a{
  width: 32%;
}

section.magazine .magazine-list dt{
  overflow: hidden;
}
section.magazine .magazine-list dt img{
  max-width: 100%;
}
section.magazine .magazine-list dd{
  margin-top: 1rem;
  font-size: 2rem;
  text-align: center;
  font-weight: var(--font--weight--bold);
}

section.magazine .magazine-list a:hover dt img{
  transform: scale(1.1);
   transition: .5s all;
}
section.magazine .magazine-list a:hover dd{
  color: var(--global--color--yegblue);
}






/*-------------------------Access -------------------------*/
section.access{
  margin: 6rem 0 9rem;
}
section.access .access-inbox{
  display: flex;
  margin-top: 5rem;
}
section.access .access-inbox .access-information{
  width: calc(40% - 6rem);
  display: flex;
  justify-content: flex-end;
  margin-right: 5rem;
  padding-left: 1rem;
}
section.access .access-inbox .access-information .name{
  color: var(--global--color--blue);
  font-size: 3rem;
  font-weight: var(--font--weight--bold);
  margin-bottom: 3rem;
}
section.access .access-inbox .access-information .address{
  margin-bottom: 3rem;
}
section.access .access-inbox .access-information .tel{
  margin-top: 1.5rem;
}

section.access .access-inbox .access-information .root{
  margin-top: 1.5rem;
}

section.access .access-inbox .access-map{
  width: calc(60% + 6rem);
  overflow: hidden;
  border-radius: 2rem 0 0 2rem;
}
section.access .access-inbox .access-map iframe{
  height: 37rem;
  width: 100%;
}












footer{
  background-color: var(--global--color--yegblue);
  padding: 3rem 0;
  text-align: center;
  padding-bottom: calc(3rem + 10rem);
}

footer p{
  color: var(--global--color--white);
  font-size: 2rem;
}
footer small{
  display: block;
  color: var(--global--color--clearblue);
  font-size: 1.2rem;
  margin-top: 1.5rem;
}






.footer-button{
  position: fixed;
  width: 100%;
  height: 10rem;
  bottom: 0;
  z-index: 10;
    background-color: #325e9b;
    background-image: radial-gradient(circle, #000000 1px, transparent 1px);
    background-position: 0 0;
    background-size: 3px 3px;
    display: flex;
    align-items: center;
}

.footer-button ul li a{
  display: flex;
  height: 6rem;
  background-color: var(--global--color--buttonblue);
  align-items: center;
  justify-content: center;
  width: 50rem;
  border-radius: 2rem;
  border: var(--global--color--clearblue) .2rem solid;
  position: relative;
  overflow: hidden;
}
.footer-button ul li a span{
  font-size: 2rem;
  color: var(--global--color--white);
  font-weight: var(--font--weight--bold);
}


.footer-button ul li a::before {
	content: "";			/* 文字は表示しないので中身無しを指定 */
	position: absolute;	/* ボタンの位置を基準に絶対値指定する */
	display: block;		/* 形式はblock */
	background: linear-gradient(to right,rgba(255,255,255,.7), rgba(255,255,255,0.5));
	/* 背景色は透明から白になるグラデーション */
	width: 20px;	/* 横幅 */
	height: 80px;	/* 縦幅 */
	top: -60px;	/* ボタン左上を基準に上へ60pxの位置 */
	left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */
	/* アニメーションの動作指定 */
	animation-name:shine-run;	/* アニメーション名の指定 */
	animation-delay:1s;		/* アニメーションの開始時間指定 */
	animation-duration: 4s;	/* アニメーション動作時間の指定 */
	animation-timing-function: ease-in;
	/* アニメーションの動き指定（徐々に早く）*/
	animation-iteration-count: infinite;
	/* アニメーションの無限繰り返しの指定 */
	}
	/* ------------------------------------
	アニメーションのタイミングとボックスの
	拡大率、角度、透過率の指定
	------------------------------------*/
	@keyframes shine-run {
		0% {
		transform: scale(0) rotate(50deg);
		/* アニメ開始時は大きさ0、50度の傾き */
		opacity: 0;
		/* アニメ開始時は全透過 */
		}
		70% {
		transform: scale(1) rotate(50deg);
		/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
		opacity: 1;
		/* 透過しない（しっかり表示される）ように1を設定 */
		}
		100% {
		transform: scale(250) rotate(50deg);
		/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
		opacity: 0;
		/* 全透過になるようにして、徐々に消えるような変化を付ける */
		}
	}
	





.container_01 {
  margin: 0;
  padding: 0;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  right: 0;
  z-index: 2;
  bottom: 0;
}

.container_01 a:hover {
  opacity: 0.7;
}

.scroll-down_01 {
  position: relative;
  width: 50px;
  height: 200px;
  color: #fff;
  font-family: serif;
  text-decoration: none;
}

.arrow_01 span{
   writing-mode: vertical-rl;
   margin-left: 1.5rem;
   font-size: 1.4rem;
   color: var(--global--color--black);
}

.arrow_01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 80px;
  transform: translate(-50%, -50%);
  animation: scroll_01 3s infinite;
}

.arrow_01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 1px;
  background-color: var(--global--color--gray);
  transform: translateX(-50%);
}
.arrow_01::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-bottom: 1px solid var(--global--color--gray);
  transform: translateX(-50%) rotate(-45deg);
}

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

@keyframes scroll_01 {
  0% {
    transform: translate(-50%, -50%) translateY(-10px);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(10px);
    opacity: 1;
  }
}






.accordion  {
  padding: 2rem 0;
  border-bottom: var(--global--color--lightgray) .1rem solid;
}

.accordion_title {
  list-style: none;
    color: var(--global--color--blue);
    font-weight: var(--font--weight--bold);
    position: relative;
}

summary.accordion_title::-webkit-details-marker {
  display:none;
}


summary.accordion_title::before,
summary.accordion_title::after{
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 1rem;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--global--color--black);
  transform-origin: calc(100% - 1px) 50%;
 transition: .5s all;
}


summary.accordion_title::before {
  transform: rotate(45deg);
}

summary.accordion_title::after {
  transform: rotate(-45deg);
}


.accordion_title span{
    display: block;
    font-size: 1.4rem;
    font-weight: var(--font--weight--regular);
    color: var(--global--color--gray);
}
.accordion::details-content {
  opacity: 0;
  block-size: 0;
 transition: .5s all;
  line-height: 1.6em;
}

.accordion .accordion_content {
  padding: 0 2em 0 3em;
 transition: .5s all;
}

.accordion .accordion_content > *:first-of-type {
  margin-top: 0;
}

.accordion .accordion_content > *:last-of-type {
  margin-bottom: 0;
}

.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}

.accordion[open] .accordion_content {
  padding: 1.4em 2em 1.4em 3em;
}

.accordion[open] .accordion_title:before {
  transform: rotate(135deg);
}
.accordion[open] .accordion_title:after {
  transform: rotate(45deg);
}






.line-container {
    position: absolute;
    top: 4rem;
    bottom: 0;
    left: 2rem;
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, blue 0%, gray 0%);
    z-index: 0;
    height: calc(100% - 28rem);
}



.csoon{ text-align: center; font-size: 3rem; padding-top: 5rem; }
.csoon span{ display: block; font-size: 1.4rem; }

.history img{ height: 24rem; }


.contacts{ margin-top: 2rem; font-size: 1.4rem; color: var(--global--color--white); }

footer .banner{ margin-top: 3rem; }
footer .banner a{ display: inline-block; padding: 1.5rem 3rem; position: relative; border: var(--global--color--white) .1rem solid; }
footer .banner a::after{ content: ""; position: absolute; right: .3rem; top: .3rem; background: url('./assets/images/icon_link.svg') no-repeat 0 0 / 1.5rem auto; width: 1.5rem; height: 1.5rem; }







@media screen and (max-width: 1433px){

  section.main .town{
    display: none;
  }

  
section.main::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 13.5rem;
  background: url('./assets/images/main_town.svg') no-repeat 100% 100% / auto 13.5rem;
  bottom: 0;
}
  section.sponcer .town{
    display: none;
  }

  
  section.sponcer::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 10rem;
    background: url('./assets/images/footer_town.png') no-repeat 50% 100% / auto 10rem;
    bottom: 0;
  }
  
}


@media screen and (max-width: 1100px){

  section.access .access-inbox .access-map iframe{         height: 52rem;
        max-height: initial !important; }

}


@media screen and (max-width: 940px) and (min-width: 796px){

  header .logo{ width: 25vw; }
  header .logo img{ width: 100%; }
  header .header-inner{ padding: 0 1.5rem; }
  header .menu ul li a{ font-size: 1.4rem; }


  section.about::before,
  section.about::after{ opacity: .3; }
  

}








@media screen and (min-width: 796px){

  .president-list dl:nth-child(4n){
    margin-right: 0;
  }
  .president-list dl{
    width: 23.5%;
    margin-right: 2%;
  }
  .president-list dl dt img{
    max-width: 100%;
  }

  .sp{ display: none !important; }

}

@media screen and (max-width: 795px){

  .pc{ display: none !important; }


  section.about .name{
  display: block;
}

section.about .name .photo{
  display: none;
}


footer .banner{
  margin-bottom: 3rem;
}

footer .banner img{ max-width: 20rem; }



section.sponcer .buttonss a{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 7rem;
  border: var(--global--color--green) .2rem solid;
  border-radius: 5rem;
  font-size: 1.4rem;
  padding: 0 2rem;
}
section.sponcer .buttonss a i{
  margin-right: .5rem;
}
section.sponcer .buttonss a:hover{
  background-color: var(--global--color--green); color: var(--global--color--white);
}

.contacts{ margin-top: 1rem; font-size: 1.2rem; }

header .logo{ max-width: 20rem; }
header .logo img{ width: 100%; }

header .header-inner{ padding: 0 1rem; }

section.greeting{ overflow-x: hidden; }

.main .countdown .time-times span{ font-size: 5.7vh !important; }

  .footer-button ul li a{ width: calc(100vw - 3rem); }
  .footer-button ul li a span{ font-size: 1.6rem; }

  
  .profile{ border-radius: 1rem; display: block; }
  section.about .texts{ width: 100%; margin-left: 0; }
  .profile .photo{ max-width: inherit; }

section.about h3{ font-size: 2.2rem; }

.stepbar .stepbarwrap .steptitle .title{ margin-left: 2rem; }
.stepbar .stepbarwrap .steptxt{ padding-left: 6rem; }
  .menu{
    display: none;
  }

  .greeting-leader .inner{
    padding-bottom: 5rem;
  }

  section.about::before,
  section.about::after,
  .greeting-leader::after,
  .president::before{
    display: none;
  }

.main .countdown .time-container{ width: auto; }

  .president-list dl{ width: 49%; }
  .president-list dl dd{ margin: 1.5rem 0 2rem; }

  section.president .president-list{ border-radius: 0; padding: 3rem 2rem; }
  .president-list dl:nth-child(even){ margin-right: 0 !important; }
  .president-list dl dd span{ font-size: 1.2rem; letter-spacing: 0; }

  .president-list dl dd .company{ font-size: 1.2rem; }

  .main .countdown p.txt{ font-size: 2rem; }

.main .logo img.bg {
    max-width: 100rem;
    height: 85vh;
    margin-right: 10vw;
    width: 105%;
}
.main .countdown .time-container{ height: 10rem; padding: 0 2rem; }
.main .countdown .time, .main .countdown .time span{ font-size: 5rem; }

.time-num{ width: 8rem; }

.main .logo-wrapper{
  height: calc(90vh - 10rem);
}

.main .countdown .time-hours span{ font-size: 5rem !important; }

  .main .logos{ margin-top: -14vh; max-width: 35vh; }

  h3.title{ font-size: 2.2rem; letter-spacing: .1rem; height: 4.5rem; }

  section.magazine .magazine-list{ overflow-x: scroll; width: calc(100% - 1rem); padding-bottom: 3.5rem; margin-top: 2.5rem; }
  section.magazine .magazine-list a{ min-width: 34rem; }
  section.magazine .magazine-list a:not(:last-child){ margin-right: 1.5rem; }
  section.magazine .magazine-list::-webkit-scrollbar-thumb {
    background-color: #3760d0;
    border-radius: 8px;
  }


  section.news{ padding: 3rem 0 5rem 0; }
  section.news .inner{ display: block; padding: 0 2rem; }
  section.news h2{ padding-top: 0; }
  section.news .news-list{ width: 100%; }
  section.news .news-list .news-article{ padding: 1rem 0; }
  section.news .news-list .news-article dl dt{ font-size: 1.2rem; }




  section.excursion{ margin: 5rem 0; }
  section.excursion .excursion-inbox{ display: block; margin-top: 1rem; }
  section.excursion .excursion-inbox .image,
  section.excursion .excursion-inbox .image img{ width: 100%; }
  section.excursion .excursion-inbox .excursion-information{ width: 100%; }
  section.excursion .excursion-inbox .excursion-information h3{ margin-top: 2rem; margin-bottom: 2rem; }

  section.excursion .button{ margin: 4rem 1rem 0; }
  section.excursion .button a{ width: 100%; }


  /* access */
  section.access{ margin: 3rem 0; }
  section.access .access-inbox{ display: block; padding: 0 1rem; margin-top: 2.5rem; }
  section.access .access-inbox .access-information{ width: 100%; margin-right: 0; text-align: center; }
  section.access .access-inbox .access-information-inbox{ width: 100%; margin-bottom: 2.5rem; }
  section.access .access-inbox .access-information .name{ margin-bottom: 1rem; font-size: 2rem; }
  section.access .access-inbox .access-information .address{ font-size: 1.4rem; margin-bottom: 1rem; }

  section.access .access-inbox .access-map{ width: 100%; border-radius: 2rem; }

  

  /* greeting */
  section.greeting dl{ margin: 3.5rem 0 2rem 0; }
  section.greeting dl dd{ margin-top: 2rem; font-size: 2.2rem; }
  section.greeting dl dd span{ font-size: 1.4rem; }

  .banner-a ul li{ width: 100%; margin-right: 0; margin-bottom: 2%; }
  .banner-a ul li a,
  .banner-a ul li a img{ width: 100%; height: auto; }
  .banner-a ul li:nth-child(odd){ margin-right: 0 !important; }

  .banner-big ul li{ width: 100%; margin-right: 0; margin-bottom: 2%; }
  .banner-big ul li a,
  .banner-big ul li a img{ width: 100%; height: auto; }


  .banner-middle ul li{ width: 49%; margin-right: 2%; margin-bottom: 2%; }
  .banner-middle ul li:nth-child(even){ margin-right: 0 !important; }
  .banner-middle ul li a,
  .banner-middle ul li a img{ width: 100%; height: auto; }

  .banner-small ul li a{ font-size: 1.4rem; }


  
  section.greeting .message{ font-size: 1.4rem; line-height: 2; }


  /* footer */
  footer{ padding: 2rem 0 0; padding-bottom: calc(1.5rem + 10rem); }
  footer p{ font-size: 1.5rem; }
  footer small{ margin-top: .5rem; font-size: 1rem; }

  section.magazine{ margin-bottom: 5rem; margin-top: 5rem; }

  section.president .president-list{ margin-top: 2rem; }


  h2.title .tit{ font-size: 2.2rem; }
  h2.title .tit span{ font-size: 1.4rem; }

  section.sponcer .inner{ padding-bottom: 7rem; }

  section.about .inner{ padding-bottom: 5rem; }

  .banner-small ul li{ width: 49%; }

  .banner-small ul li a{ display: block; text-align: center; }
  

	.hamburger{
		display : block;
		position: fixed;
		z-index : 111;
		right : 0;
		top   : 0;
		width : var(--header--width--sp);
		height: var(--header--width--sp);
		cursor: pointer;
    background-color: var(--global--color--blue);
		text-align: center;
	}

	.hamburger span {
		display : block;
		position: absolute;
		width   : calc(var(--header--width--sp) / 2);
		height  : 2px ;
		left    : calc(50% - calc(var(--header--width--sp) / 4));
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition   : 0.3s ease-in-out;
		transition        : 0.3s ease-in-out;
    background-color: var(--global--color--white);
	}
	.hamburger span:nth-child(1) { top: calc(50% - 1.2rem); }
	.hamburger span:nth-child(2) { top: calc(50% - .1rem); }
	.hamburger span:nth-child(3) { top: calc(50% + 1rem); }


	/* スマホメニューを開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(-45deg);
		-moz-transform   : rotate(-45deg);
		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2){
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(45deg);
		-moz-transform   : rotate(45deg);
		transform        : rotate(45deg);
	}




	/* メニュー背景　*/
	.globalMenuSp {
		position: fixed;
		z-index : 102;
		top  : 0;
		left : 0;
		background: var(--global--color--white);
		text-align: center;
		width: 100%;
		margin-top: var(--header--width--sp);
		transform: scale(0,0);
		transition: all 0.6s;
		visibility: hidden;
		height: calc(100vh - var(--header--width--sp));
		opacity: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: auto;
		padding-top: 2rem;
	}
	.globalMenuSp ul {
		margin: 0 auto;
		padding: 0;
		width: calc(100% - 4rem);
		margin: 0 2rem;
	}

	

	.globalMenuSp ul li {
		list-style-type: none;
		padding: 0;
		width: 100%;
		transition: .4s all;
		border-top: var(--color--semiorange) 1px dashed;
	}

	.globalMenuSp ul li:last-child {
		padding-bottom: 0;
		border-bottom: var(--color--semiorange) 1px dashed;
	}

	

	.globalMenuSp ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--color--orange);
		padding: 2rem 1rem 2rem 2rem;
		text-decoration :none;
	}

	.globalMenuSp ul li:hover a,
	.globalMenuSp ul li.active a{
		color: var(--color--white) !important;
	}

	header.g .hamburger span{ background : var(--color--green); }
	header.b .hamburger span{ background : var(--color--blue); }
	header.p .hamburger span{ background : var(--color--pink); }

	header.g .globalMenuSp ul li.active a{ background-color: var(--color--green); }
	header.b .globalMenuSp ul li.active a{ background-color: var(--color--blue); }
	header.p .globalMenuSp ul li.active a{ background-color: var(--color--pink); }

	header.g .globalMenuSp ul li{ border-top: var(--color--green) 1px dashed; }
	header.b .globalMenuSp ul li{ border-top: var(--color--blue) 1px dashed; }
	header.p .globalMenuSp ul li{ border-top: var(--color--pink) 1px dashed; }

	header.g .globalMenuSp ul li:last-child { border-bottom: var(--color--green) 1px dashed; }
	header.b .globalMenuSp ul li:last-child { border-bottom: var(--color--blue) 1px dashed; }
	header.p .globalMenuSp ul li:last-child { border-bottom: var(--color--pink) 1px dashed; }

	header.g .globalMenuSp ul li a { color: var(--color--green); }
	header.b .globalMenuSp ul li a { color: var(--color--blue); }
	header.p .globalMenuSp ul li a { color: var(--color--pink); }
	
	header.g .globalMenuSp ul li:hover a,
	header.g .globalMenuSp ul li.active a{ background-color: var(--color--green); }
	header.b .globalMenuSp ul li:hover a,
	header.b .globalMenuSp ul li.active a{ background-color: var(--color--blue); }
	header.p .globalMenuSp ul li:hover a,
	header.p .globalMenuSp ul li.active a{ background-color: var(--color--pink); }

	

	/* クリックでjQueryで追加・削除 */
	.globalMenuSp.active {
		opacity: 1;
		visibility: visible;
		transform: scale(1,1);
	}

	/* sns */
	header .globalMenuSp .sns{ margin-bottom: 1.5rem; }
	header .globalMenuSp .sns ol{ justify-content: space-between; }
	header .globalMenuSp .sns ol li{ width: 33.3%; margin-right: 0 !important; }
	header .globalMenuSp .sns ol li a{ width: 100%; }
	header .globalMenuSp .sns ol li a:hover i,
	header .globalMenuSp .sns ol li a i{ color: var(--color--orange); }

	header.g .globalMenuSp .sns ol li a i{ color: var(--color--green); }
	header.b .globalMenuSp .sns ol li a i{ color: var(--color--blue); }
	header.p .globalMenuSp .sns ol li a i{ color: var(--color--pink); }


  .greeting-chairman::after{
    content: "";
    position: absolute;
    width: 81.2rem;
    height: 73.8rem;
    background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
    top: 40%;
    right: 0;
    z-index: -1;
  }


  .greeting-leader::before{
    content: "";
    position: absolute;
    width: 81.2rem;
    height: 73.8rem;
    background: url('./assets/images/bg03.svg') no-repeat 50% 50% / 81.2rem auto;
    top: 40%;
    left: 0;
    z-index: -1;
  }





}









@media screen and (min-width: 768px){


/* fadeInRightUp */
.js-fadeUpRU { opacity: 0;	transform: translate(30px, -30px); transition: opacity .8s, transform .8s; }
.js-fadeUpRU.is-inview { opacity: 1; transform: translate(0, 0); transition-delay: .5s; }


/* fadeInRightDown */
.js-fadeUpRD { opacity: 0;	transform: translate(30px, 30px); transition: opacity .8s, transform .8s; }
.js-fadeUpRD.is-inview { opacity: 1; transform: translate(0, 0); transition-delay: .5s; }

/* fadeInRightDown */
.js-fadeUpLD { opacity: 0;	transform: translate(-30px, 30px); transition: opacity .8s, transform .8s; }
.js-fadeUpLD.is-inview { opacity: 1; transform: translate(0, 0); transition-delay: .5s; }



  /* フェードイン(初期値) */
.js-fadeUpText01 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
  }
  /* フェードイン(スクロールした後) */
  .js-fadeUpText01.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
  }
  .js-fadeUpText02 {
	  opacity: 0; /* 最初は非表示 */
	  transform: translateY(30px); /* 下に30pxの位置から */
	  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
	}
	/* フェードイン(スクロールした後) */
	.js-fadeUpText02.is-inview {
	  opacity: 1; /* 表示領域に入ったら表示 */
	  transform: translateY(0); /* 30px上に移動する */
	  transition-delay: .8s; /* フェード開始を0.5秒遅らせる */
	}


	
.js-fadeUpG { opacity: 0; transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview{ opacity: 1; transition-delay: .5s; }


.js-fadeUpG .g01{ opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview .g01{ opacity: 1; transform: translateY(0); transition-delay: .8s; }

.js-fadeUpG .g02{ opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview .g02{ opacity: 1; transform: translateY(0); transition-delay: .95s; }

.js-fadeUpG .g03{ opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview .g03{ opacity: 1; transform: translateY(0); transition-delay: 1.1s; }

.js-fadeUpG .g04{ opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview .g04{ opacity: 1; transform: translateY(0); transition-delay: 1.25s; }

.js-fadeUpG .g05{ opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.js-fadeUpG.is-inview .g05{ opacity: 1; transform: translateY(0); transition-delay: 1.4s; }


}