﻿h1, h2, h3, h4, h5, h6 {
        font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;
}
#header, footer .entry.more a, .page10 .more a {
    font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* ======================================================================================
　　color
======================================================================================== */
.bg_color1 {
    background-color: #079bdd;
}
.border_color1 {
    border-color: #079bdd;
}
#loading_line{
    background: none;
    background-color: #079bdd;
}
.bg_color3 {
    background-color: #eeeeee;
    color: #191a1f;
}
.border_color3 {
    border-color: #51de7b;
}
.border_color4 {
    border-color: #505050;
}


/* ----------　all　---------- */
.linkStyle{
	color:#00bcd4;
}
.linkStyle:hover{
	color:#00bcd4;
	opacity: 0.7;
	transition: all 0.5s;
}
body, .txt_color_nomal {
    color: #191a1f;
}
#page-top p{
    position: relative;
}
.footer_cms,.footer_txt li a,.footer_txt p.font_4dw ,#copyright{
    color: #fff;
}


/* ======================================================================================
　　all
======================================================================================== */
#main .flex_column {
    flex-direction: unset;
}
#main .sns_link{
    width: 100%;
    justify-content: flex-end;
    top: 25px;
    right: 87px;
    transform: none;
}
#main .sns_link li{
    width: 50px!important;
}
#main .sns_link li img{
    width: 100%!important;
}
.g-menu{
    background: #007ae5;
    background: linear-gradient(to right, rgb(0 122 229) , rgb(70 210 190));
}
.g-menu .menu-content-nav .font_25up{
    font-size: 35px;
}
.g-menu-btn .dot span{
    background: #fff;
}
.g-menu-btn:after {
    border: 1px solid #fff;
    background: rgb(30 144 255 / 55%);
}
#header {
    background: rgb(11 135 255 / 75%);
    background: linear-gradient(to right, rgba(0, 122 ,229 ,0.65) , rgba(70,210,152,0.75));
    padding-top: 10px;
    padding-bottom: 10px;
}
#header h1 img, #header .logo img{
    max-width: 200px;
}
footer.bg_color1 {
    background-image: url(./Dup/img/footer_bg.jpg)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
footer:before {
    content: "";
    display: block;
    position: absolute;
    background: rgba(84,84,84,0.55);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
footer .f_info_wrap{
    width: 80%;
    align-items: flex-start;
}
footer .f_info_wrap .logo{
    margin-top: 10px;
}
.footer_txt .footer_nav li{
     border-right: 1px solid #ffffff;
}

footer .entry.more a {
    background: linear-gradient(to right, rgb(0 122 229) , rgb(70 210 190));
    color: #fff;
}
footer .entry.more a:after {
    background-color: #eeeeee;
}
.footer_txt .footer_nav li:last-child {
    border-right: none;
}

/* ======================================================================================
　　top
======================================================================================== */
#video {
    position: relative;
    min-width: 600px;
    width: 50%!important;
    margin: 75px auto 15px;
}
.video_wrap::before {
    position: absolute;
    content: "";
    left: 0;
    top: 30%;
    width: 100%;
    height: 148px;
    background-image: url(../dup/img/loop_txt.png);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-size: 1855px;
    background-position: 0 100%;
    animation: bgroop 40s linear infinite;
}
@keyframes bgroop {
    from {background-position: 0  100%;}
    to {background-position: -1855px 100%;}
}

#main .sns_link,#main .main_box{z-index: 2;}
#main{position: relative;}
#main:before, #main:after {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(./Dup/img/main1.png);
    background-size: 100%;
    width: 26vw;
    height: 42vw;
    z-index: 1;
    opacity: 0.5;
}
#main:after {
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
}
.main_txt {
    z-index: 1;
    max-width: 844px;
    width: 76%;
    /* filter: drop-shadow(4px 4px 24px rgba(0,0,0,0.45)); */
    position: absolute;
    top: 39%;
    left: -2px;
    transform: none;
}
h1.logo.top {
    width: 23%;
    max-width: 295px;
    top: 5%;
    left: 4%;
    z-index: 2;
}
#main .entry.more{
    z-index: 2;
}
#main .main_txt.animStart2 img {
    animation: heroText 600ms 1000ms both;
}
@-webkit-keyframes heroText {
0% {
	opacity: 0;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
@keyframes heroText {
0% {
	opacity: 0;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}

#main .sns_link li{
    background-color: #0f487f;
}
.back_color {
    position: relative;
    background: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(238 238 238 / 0%) 20%, rgba(238 ,238 ,238 ,0.85) 80%,rgba(255 ,255 ,255 ,0.55) 100%);
}
.back_color::before {
    display: inline-block;
    content: "";
    background-color: rgba(187,225,255,0.67);
    background-image: radial-gradient(#ffffff00 10%, transparent 20%), radial-gradient(rgb(238 238 238 / 97%) 10%, transparent 20%);
    background-position: 0 0, 10px 10px;
    background-size: 5px 5px;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    left: 0;
}
#main .main_box {
    max-width: 600px;
    width: 70%;
}

#main .main_box .logo img{
    filter: drop-shadow(0px 4px 15px rgba(25, 26, 31 ,0.5));
}
.main_dec{
    position: absolute;
    bottom: -20px;
    right: 0;
    max-width: 550px;
    width: 50%;
}
#catch .catch_txt {
    background-color: rgb(255 255 255 / 90%);
    color: #1c1c1c;
}
#catch .catch_txt h2{
    font-size: -webkit-calc(1rem + 15px);
    font-size: calc(1rem + 15px);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.7;
}
#catch .catch_txt h2 span {
    border-bottom: 4px solid #51de7b;
    color: #51de7b;
}
.catch_txt h3 {
    font-size: 44px;
    letter-spacing: 2px;
    line-height: 1.0;
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    margin: auto;
    text-align: center;
    color: #202020;
}
#contents .box .no .en_font,.cms_title::before{
    font-style: italic;
}
#contents .box .no .en_font{
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
}
#contents .box .no .en_font, .cms_title::before {
    font-style: normal;
    font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 400;
}
#contents .box .box_item:after {
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #079bdd 50.5%) no-repeat top left/100% 100%;
}
#contents .box .box_item:before{
    background-color: rgba(40,40,40,0.56);
}
#contents h2 {
    display: inline-block;
    border-bottom: 5px solid #51de7b;
    font-size: 29px;
}
.top_cms_box {
    background-color: rgba(250, 250 ,250 ,0.90);
    box-shadow: 0 5px 10px rgba(188 ,222, 218 ,0.25);
    border-radius: 5px;
}
#top_cms .cms_title p span{
    color: #51de7b;
}


/* ======================================================================================
　　under
======================================================================================== */

.all_page main{
    background: none!important;
    background-color: #eeeeee!important;
}
#page_title:after {
    background: linear-gradient(135deg,rgb(40 141 239 / 74%), rgb(148 219 231 / 80%));
}
#page_title:before{
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f0f0f0 50.5%) no-repeat top left/100% 100%;
}
#page_title .page_title_box p.font_30up{
        color: #fff;
}
#page_title .page_title_box p.font_9up span {
    color: #ffffff;
}
.cate_title::first-letter {
  font-size: 150%;
  color: #079bdd;
  letter-spacing: 4px;
}
.cate_list li {
    width: auto;
    padding: 0 2%;
}

.page7 #map iframe:first-child {
    margin-bottom: 30px;
}
.page10 .more{
        width: 27%!important;
}
#page_title .sns_link li{
    background-color: #0f487f;
}
.more a:hover:after{
    transform: scaleX(0.5);
}

/* ======================================================================================
　　window size
======================================================================================== */

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
.g-menu .menu-content-nav .font_25up {
    font-size: 22px;
}
h1.logo.top {
    width: 31%;
}
.main_txt {
    width: 90%;
}
footer .f_info_wrap {
    width: 100%;
}
.video_wrap::before {
    top: -32%;
}
#main .main_box {
    top: 30%;
}
#main .main_box h1 {
    max-width: 600px;
}  
.main_dec {
    width: 60%;
}
#catch .catch_txt h2 {
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
}

#contents .box .no .en_font {
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
        line-height: 1;
    padding: 20px 0;
}
#contents .box .box_item {
    padding: 80px 50px 50px;
}
#contents h2 {
    font-size: 20px;
}

#page_title .page_title_box p.font_30up {
    font-size: 30px;
}
.page10 .more {
    width: 100%!important;
}
}


/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
h1.logo.top {
    width: 41%;
}
.back_color::before {
    background-color: rgb(255 255 255 / 36%);
}
.sp_back{opacity: 1!important;}
.g-menu .menu-content-nav .font_25up {
    font-size: 18px;
}
.video_wrap::before {
    top: -27%;
    height: 72px;
    background-size: 947px;
}
#video {
    min-width: 100%;
    width: 100%!important;
    margin: 75px auto 15px;
}
#main .sns_link{
    display: none;
}
#main .main_box {
    width: 80%;
}
.main_txt {
    width: 100%;
    left: -11px;
}
#catch .catch_txt h2 {
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);
}
#catch .catch_txt {
    margin-top: 57px;
}
.catch_txt h3{
    font-size: 34px;
}
#contents .box .box_item {
    padding: 80px 30px 50px;
}    
#contents .box .box_item h2{
    font-size: 23px;
}
#contents .box .box_item:after{
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #079bdd 50.5%) no-repeat bottom left/100% 100%;
}
.shop_info .info,.shop_info .contact {
    padding: 100px 0;
}
.shop_info h2{
    width: 70%;
}
.shop_info.more a.info_box:after{
    display: none;
}
#page_title .page_title_box p.font_30up span {
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
    letter-spacing: 0;
}
.cate_list li {
    width: 90%;
    padding: 0 1%;
}

#page_title .page_title_box p.font_30up {
    font-size: 30px;
}
footer .logo {
    text-align: center;
}
.page8 #tel_contact .tel a {
        font-size: -webkit-calc(1rem + 1px);
    font-size: calc(1rem + 1px);
}
.page10 .more a{
    font-size: 14px;
}
.page10 .more a:after {
    right: 0px;
    width: 8%;
}
}

/* fix_banner -------------------------------------- */
.fix_banner{
	max-width: 440px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner .close_bt {
    position: absolute;
    bottom: 144px;
    right: 339px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: 0.5s;
    background-color: #fff;
    border: solid 2px #51de7b;
    z-index: 11;
    cursor: pointer;
    display: none;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #51de7b;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}
@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;}
.fix_banner .close_bt {
    bottom: 109px;
    right: 277px;
}
}
@media  screen and (max-width: 667px){
.fix_banner{max-width: 212px;}
.fix_banner .close_bt {
    width: 22px;
    height: 22px;
    bottom: 76px;
    right: 193px;
}
.fix_banner .close_bt span {
    width: 22px;
    height: 22px;
}
}
/* fix_banner end -------------------------------------- */