@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dokdo&display=swap');
#catch p span {color: #08afa4}
#page10 .grid_4 a span.font_24 {
    font-size: 20px;
}
#footer .tel i {
    position: absolute;
    background: #09afa4;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    padding: 0px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-right: -10px;
    z-index: 1;
    font-size: 36px;
    left: -48px;
    top: 50%;
    margin-top: -30px;
}
#footer .tel a {
    background: #198ebf;
    padding: 9px 9px 9px 17px;
    position: relative;border: 2px solid;
    margin-right: -30px;
}
.top_cms_title h3 {position: relative;}
.top_cms_title h3::before {
   content: "";
    display: block;
    position: absolute;
    top: -4px;
    left: -19px;
    z-index: -1;
    opacity: 0.2;
    width: 75px;
    height: 75px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    background-image: url(Dup/img/icon1.png);
    -webkit-animation: anime_move1 5s linear infinite;
    animation: anime_move1 5s linear infinite;
}
#top_cms {
    background: url(Dup/img/bg.png) no-repeat 50% 100%;
    background-size: 100%;
}

body, .font_en {
font-family: 'Sawarabi Gothic', sans-serif;   
}
#contents h3 span, #intro p.font_en, #page10 .grid_4 a .no, #top_cms .top_cms_title h4 span {
font-family: 'Dokdo', cursive;
color: #08afa4;
}
#page10 .d_flex .grid_4 {
    background-color: #9ee2ff;
}
#page10 .grid_4 a .no {
    background-color: #198ebf;
    color: #fff;
}
#page07 .grid_4 h3::after {
    background-color: #5cc2f2;
}
#main_contents #catch {
    transform: translateY(-6vw);
    z-index: 4;
}
#catch h2 {
    font-size: 4.3vw;
}
#contents h4 {
    border-radius: 0 18px 0 0;
    background: rgba(25, 142, 191, 0.64);
    transform: translateY(-72px);
}
#contents h3 span {padding: 0}
/*水色　#b0e0e6　　→　#c0f8ff
濃い青　#00758f
テキスト　#333*/
#intro hgroup {
text-align: center;
    background: url(Dup/img/midasi.png) no-repeat 50% 84%;
    background-size: 111px;
    padding-bottom: 55px;
}
#intro hgroup h2 {border-bottom: 2px solid #01b6d2;
        display: inline-block;
}
#intro, #contents {
    position: relative;
}
#intro:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -199px;
    right: 120px;
    width: 169px;
    height: 150px;
    background-image: url(Dup/img/car.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
    animation-name: hurueru;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in-out;
    -webkit-animation: hurueru 0.4s ease-in-out infinite alternate;
    animation: hurueru 0.4s ease-in-out infinite alternate;
}
#contents .carAnim {
    width: 174px;
    background: transparent;
    bottom: 75px;border: none;
}
#contents .carAnim img {
    animation-name: hurueru;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in-out;
    -webkit-animation: hurueru 0.4s ease-in-out infinite alternate;
    animation: hurueru 0.4s ease-in-out infinite alternate;
}
#contents .carAnim.trans {
    animation-name: carAnim;
    animation-duration: 3.1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-delay: 3.5s;
}
@keyframes carAnim {
	0% {left: 0;transform: translate(-0%,-0%);}
	100% {left: 103%;transform: translate(0,-0%);}
}

/* ----------------------------------- cursor -------------------------------------------*/
body{
  position: relative;
  cursor: none; /*もともとあるカーソルは非表示に*/
}
a{
  display:inline-block;
  /*margin:40px;*/
}
/*カーソル要素*/
#cursor{
   position: fixed;
    background: #fff;
    border-radius: 10px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.1s;
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
  position: fixed;
  /*丸の大きさと色の指定*/
  background:#198ebf;
  width: 60px;
  height: 60px;
  border-radius:30px;
  margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 9997;/*カーソルの後ろに来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.5s;/*アニメーションの秒数指定*/
}
#cursor.active {background:transparent}
#cursor.active,
#stalker.active{
  transform: scale(1.4);
}
@media(max-width: 667px) {
    #cursor, #stalker {
        display: none;
    }
}
/* ----------------------------------TOPCONTENTS----------------------------------- */
#intro::after, #contents::after {
    background-color: rgba(0, 198, 221, 0.45);
}
#page_title::after {
    background-color: rgba(0, 164, 182, 0.45);
}
#contents_link a::after {
    background-color: rgba(0, 175, 202, 0.44);
}
#contents_link a::before {
    background-color: rgba(0, 5, 7, 0.21);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#intro > div, #contents > div {
    background: #fff;
    padding: 35px;
    border-radius: 0 30px;
    border: 6px solid #62d9ff;
}
.cms_6-b .cate_box:first-of-type {
    border-top: 1px solid #61d9ff;
} 
.cms_6-b .cate_box, .cms_6-b .cate_box .box_txt1, .cms_6-b .cate_box .box_txt2 {
    border-color: #61d9ff;
}
.top_cms_box > .cms_wrap {
  border: 2px solid #61d9ff;
  background-color: rgba(240, 253, 255, 0.33);
}

/* ----------------------------------HEADER----------------------------------- */
#header {padding-top: 10px;
    padding-bottom: 10px;
}
#main_contents #main_menu li::after {
    border-bottom: 1px solid #2197c0;
}
#main_contents #main_menu li a {
    padding-bottom: 7px;
    padding-top: 7px;
    padding-left: 35px;
}
#main_contents #main_menu li.active::before {
    background-color: transparent;
    background-image: url(Dup/img/icon1.png);
     -webkit-animation: anime_move1 5s linear infinite;
    animation: anime_move1 5s linear infinite;
}
#main_contents #main_menu li::before {
    background-color: transparent;
    background-image: url(Dup/img/icon1.png);
    background-size: cover;
    display: block;
    border: none;
    width: 30px;
    height: 30px;
    top: 2px;
}
@-webkit-keyframes anime_move1 {
    0% { -webkit-transform: rotateX(0deg) rotate(0deg); }
    100% { -webkit-transform: rotateX(0deg) rotate(360deg); }
}
@keyframes anime_move1 {
    0% { transform: rotateX(0deg) rotate(0deg); }
    100% { transform: rotateX(0deg) rotate(360deg); }
}

#main_contents #main_menu li:hover::before {
    opacity: 0.5;
}
#header h1 img {
    width: 220px;
}
.sns_links li a img {
    width: 40px!important;
}
header {
    border-bottom: 1px solid #61d9ff;
}
#main_contents #main_menu li::after {
    border-bottom: 1px solid #61d9ff;
}
#main_contents::after {
    background-color: #61d9ff;
}
#main_contents #main_menu li.active::before {
   /* background-color: #00758f;
    border: 2px solid #b0e0e6;*/
}

#top_cms .top_cms_title h3 span {
    border-top: 3px solid #61d9ff;
    border-top: none;
}
#top_cms .top_cms_title h4 span {
    border-bottom: 3px solid #08afa4;
    font-size: 35px;
    padding-bottom: 0;
}
#main_contents #main_img {box-shadow: none}
#contents figure {
    box-shadow: none;
}
/* ----------------------------TEXT COLOR-------------------------------------*/
#main_contents #main_menu li a, #top_cms .top_cms_title h3 span{
     color: #333;
 }
#catch span {
    color: #198ebf;
        padding: 20px;
        box-shadow: 0px 8px 16px -2px rgba(51, 94, 94, 0.10), 0px 0px 0px 1px rgba(114, 142, 153, 0.02);
}
.footer_txt span, footer .footer_menu li a, #copyright {
    color: #fff;
}
#page-top {
    background-color: #198ebf;
    border-radius: 20px 0 0 0;
}

/* --------------------------------------------------------------------- */
/*#loader {
    background: #fff url(Dup/img/bg.png) no-repeat 50% 42%;
    background-size: 100% auto;
}*/
#loader::after {
    border-bottom: 5px solid #61d9ff;
}
#loader img {
    animation-name : hurueru;
}
#loader img {
    width: 186px;
    height: auto;
    margin-top: -47px;
    animation-duration: 0.4s;
    transition-timing-function : ease-in-out;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 2px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, 2px) rotateZ(-0deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
body {background: #fff;}
body::before {
background-color: #00b6d2;
background-image: url("Dup/img/cubes.png");

}
/* -------------------------------MOREbutton背景色-------------------------------- */
#intro .more a{
    background-color: #00b6d2;
    border: 0;
transition: all 0.3s;
}
/*#top_cms .more a {
    position: relative;
    border: 2px solid #cefaff;
}*/
#intro .more a:hover {
    background-color: #00b6d2;
    transition: all 0.3s ease;
    transform: translateY(-3px);
}
#top_cms .more a {
    background-color: #00b6d2;
    color: white;
    border:0;
    font-size: 15px;transition: all 0.3s;
}
#top_cms .more a:hover{
    background-color: #61d9ff;
    transition:all 0.3s ease;
    transform:translateY(-3px);
    
}
/*#top_cms .more a:after {
    display: block;
    content: "";
    background: #198ebf;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    z-index: -2;
}*/
.cate_list li::after {
    background-color: #00758f;
}
.cate_list a .font_en {
    background: #c9c9c9;
}
/* -------------------------FOOTER-------------------------------------- */
#footer .grid_6 {
    background: #00b6d2;
}
#footer .grid_6:nth-of-type(2) {
    background-color: #9ee2ff;
}


@media screen and (max-width: 768px) {
    #footer .grid_6 {
    padding: 33px 8px;
}
    #page10 .grid_4 a {
    padding: 50px 24px 30px 31px;
}
#top_cms {
    background: url(Dup/img/bg.png) no-repeat 0% 100%;
    background-size: 194%;
}
 #menu_bt {
    background: #198ebf;
    border-radius: 0 0 0px 30px;
}   
#menu_bt > div div {
    letter-spacing: 1px;
}
#footer .grid_6 h3.font_en {
    font-size: 40px;
}
}


@media screen and (max-width:667px) {
html {
        font-size: 15px;
    }
#top_cms .more a {
border: 2px solid #fff;     
    }
.top_cms_title h3::before {
    width: 55px;
    height: 55px;
}
#intro:before {
    bottom: -33px;
    right: 27px;
    width: 102px;
    height: 99px;
}
#header h1 img {
    width: 138px;
}
#contents h4 {
    transform: translateY(-32px);
}
#contents .carAnim {
    width: 106px;
    padding: 30px 0px;
}

#loader img {
    width: 93px;
}
.top_cms_title h3 {
    font-size: 23px;
}
}

@media all and (-ms-high-contrast: none) {
    .cate_list a {
        padding-bottom: 6px;
        padding-top: 12px;
    }
.cate_list a .font_en {
    padding: 8px 5px 10px;
}
}