@charset "utf-8";

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

html,body{ width:100%;height:100%;-webkit-font-smoothing: antialiased;}
html,body{ scroll-behavior: smooth;}

.sp { display: none;}
@media screen and (max-width: 740px) {
.pc { display: none;}
.sp { display: inline-block;}
.over:hover {opacity: 1 ;} 
}

img {image-rendering: -webkit-optimize-contrast;}


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?b9jdf9');
  src:  url('fonts/icomoon.eot?b9jdf9#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?b9jdf9') format('truetype'),
    url('fonts/icomoon.woff?b9jdf9') format('woff'),
    url('fonts/icomoon.svg?b9jdf9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow_circle_right_black_24dp:before {
  content: "\e900";
}


/* コピペ用コード */
.font-size-dummy {
    font-size: .75rem;   /* 12px */
    font-size: .8125rem; /* 13px */
    font-size: .875rem;  /* 14px */
    font-size: 1rem;     /* 16px */
    font-size: 1.25rem;  /* 20px */
    font-size: 1.75rem;  /* 28px */
}


/*========================================
BASIC
=======================================*/

html{-webkit-text-size-adjust:100%; }
body{font-size: 10px; font-size: 1rem; color:#000000; font-family:'M PLUS Rounded 1c', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Lucida Grande"; font-weight: 400; animation: fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal;background-attachment: fixed;background-image: url("../img/bg.png"); background-position: bottom 40px center; background-size: cover; background-repeat: no-repeat; position: relative; }
_::-webkit-full-page-media, _:future, :root body {font-family: 'M PLUS Rounded 1c',"Lucida Grande", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.Urbanist {font-family: 'Urbanist', sans-serif;}


/* ios Safari */
@supports (-webkit-touch-callout: none) {body {height: -webkit-fill-available;}}

a{color:#00b7ce; text-decoration:none;}
a:hover{color: #ff6b6b;}
a.alllink {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-indent:-999px;z-index: 1;}

#container {width: 100%; height: 100vh; min-height: 700px; }
.copy { position: fixed; width: 100%; display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; font-size: 1rem; color: #ffffff; background: #235284; bottom: 0; left: 0;}

header {width: 100%; padding: 0; border-top: 10px solid #235284; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 60%);}
h1{display: block; width: 100%; padding: 40px 0 50px 0; opacity: 0;}
h1 img{width: 350px; height: auto; margin: 0 auto;}


main {width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 38vw;}
main ul {display: flex; justify-content: space-between; align-items: stretch; width: 100%; flex-wrap: wrap;}
main ul li {width: 47.27%;height: auto; align-self: stretch; background-color: #ffffff; padding: 10px; margin: 0 0 45px 0; border-radius: 20px; -webkit-transition: all .5s;transition: all .5s; position: relative;box-shadow: 1px 1px 12px rgba(35,82,132,.5);opacity: 0;}
main ul li > div {width: 100%; position: relative; padding: 0 0 45px 0;}
main ul li .cs_img {width: 100%;height: auto; padding: 0; overflow: hidden; border-top-left-radius: 10px;border-top-right-radius: 10px;}
main ul li .cs_img img {width: 100%; height: auto; -webkit-transition: all .5s;transition: all .5s;}
main ul li h2 {width: 100%; height: auto; padding: 30px 0 25px 0;}
main ul li h2 img {width: 100%; max-width: 385px; height: auto; margin: 0 auto;}
main ul li p {width: 100%;height: auto; font-size: 1rem; font-weight: 400; line-height: 1.68; text-align:center; color: #646464;}
main ul li span {display: flex; justify-content: center; align-items: center; width: 45px;height: 45px; font-size: 1.25rem; border-radius: 30px; color: #ffffff; background: #58afdd; -webkit-transition: all .5s;transition: all .5s; position: absolute; bottom: -45px;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
main ul li > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-indent:-999px;z-index: 1;}
main ul li:hover {box-shadow: 1px 1px 5px rgba(35,82,132,0.2);transform: translate(0,10px);}
main ul li:hover .cs_img img  {transform: scale(1.1);}
main ul li:hover span {width: 200px; }


@media screen and (max-width: 1160px) {
main {padding: 0 30px 38vw 30px;}

}

@media screen and (max-width: 740px) {
body{background-attachment: fixed; background-image: linear-gradient(0deg, rgba(35, 82, 132, 1), rgba(147, 170, 195, 1) 53%, rgba(255, 255, 255, 1) 80%);background-position: bottom 0 center;}
#container {width: 100%; height: auto; min-height: auto;  position: relative;background-image: url("../img/bg_sp.png"); background-position: bottom 6vw center; background-size: contain; background-repeat: no-repeat;}

header {width: 100%; padding: 0; border-top: 10px solid #235284;}
h1{display: block; width: 100%; padding: 10vw 0 10vw 0;}
h1 img{width: 70%; height: auto; margin: 0 auto;}

main {width: 100%; max-width: 1100px; margin: 0 auto;padding-bottom: 34vw; }
main ul {display: flex; justify-content: center; align-items: stretch; width: 100%; flex-wrap: wrap;}
main ul li {width: 90%;height: auto; align-self: stretch; background-color: #ffffff; padding: 10px; margin: 0 0 10vw 0; border-radius: 20px; -webkit-transition: all .5s;transition: all .5s; position: relative;box-shadow: 1px 1px 12px rgba(35,82,132,.5);}
main ul li > div {width: 100%; position: relative; padding: 0 0 45px 0;}
main ul li .cs_img {width: 100%;height: auto; padding: 0; overflow: hidden; border-top-left-radius: 10px;border-top-right-radius: 10px;}
main ul li .cs_img img {width: 100%; height: auto; -webkit-transition: all .5s;transition: all .5s;}
main ul li h2 {width: 100%; height: auto; padding: 30px 0 25px 0;}
main ul li h2 img {width: 90%; max-width: 385px; height: auto; margin: 0 auto;}
main ul li p {width: 100%;height: auto; font-size: 0.875rem; font-weight: 400; line-height: 1.68; text-align:center; color: #646464;}
main ul li span {display: flex; justify-content: center; align-items: center; width: 45px;height: 45px; font-size: 1.25rem; border-radius: 30px; color: #ffffff; background: #58afdd; -webkit-transition: all .5s;transition: all .5s; position: absolute; bottom: -45px;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
main ul li > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-indent:-999px;z-index: 1;}
main ul li:hover {box-shadow: 1px 1px 5px rgba(35,82,132,0.2);transform: translate(0,10px);}
main ul li:hover .cs_img img  {transform: scale(1.1);}
main ul li:hover span {width: 200px; }

.copy { position: fixed; width: 100%; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; font-size: 0.875rem; color: #ffffff; background: #235284; bottom: 0; left: 0; padding:1vw 0;}
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.fadedown {
animation-name:fadedownAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadedownAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time{
animation-delay: 0.5s;
}

.delay-time01{
animation-delay: 1s;
}

.delay-time02{
animation-delay: 1.2s;
}