﻿/********** font **********/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500&display=swap');

:root{
    --font-en: "Plus Jakarta Sans", 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_en, .top_cms_box .cms_title, .more, #info_title_box, #page_title, a[href^="tel:"], header #header #header_menu ul, #bottom_menu, #info .info_txt h3, .drawer-menu, #page10, #intro .intro_no, #con_h .con_no{
    font-family: var(--font-en)!important;
}

/********** color **********/

:root{
    --color1: #0092FF;
    --color1s: #31c6f4;
    --color2: #F2F8F9;
    --color3: #FF8F43;
    --color3s: #ffc545;
    --color4: #DAE7E8;
    --color5: #f7f7f7;
    --black: #374660;
}

/********** all **********/

#wrap{
    background-color: transparent;
}

header{
    background-color: rgba(255, 255, 255, 0.6);
}
#header{
    align-items: center;
}

#logo .logo {
    width: 140px;
}

header #header #header_menu li{
    border-top: none;
    padding-top: 10px;
}
header #header #header_menu li:first-of-type{
    display: none;
}
header #header #header_menu li a {
    padding-left: 10px;
    padding-right: 10px;
}
header #header #header_menu li a span {
    padding-top: 7px;
}

.svg_wrap{
    display: none;
}

#foot_banner {
    width: 340px;
}
#foot_banner a{
    /*background-image: linear-gradient(to right, var(--color3s), var(--color3));
    font-size: 24px;
    color: #fff;*/
    padding: 0;
}

/********** top **********/

#main_img {
    padding-top: 60px;
}

#intro{
    padding-bottom: 0!important;
}
#intro h2 span.border{
    left: calc(50% - 25px);
}
#intro_sp{
    display: none;
}

.block_h-4{
	padding-top: 25px;
}
.block_h-4 .box_img1{
	max-width: 120px;
	margin-top: -50px;
}

#contents .con_no{
    display: none;
}
#contents .con_box{
    background-color: transparent;
    border-radius: 0;
    align-items: center;
}
#contents .con1{
    background-image: linear-gradient(to right, var(--color1s), var(--color1));
}
#contents .con1 h3 span.border{
    background-color: #fff;
}
#contents .con1_2{
    background-image: linear-gradient(to right, var(--color3s), var(--color3));
}
#contents .con4 .cate_box_c{
    background-image: linear-gradient(to right, #e9f5ff, #f5ffed);
}
#contents .con_box .con_item1, #contents .con_box .con_item2{
    display: none;
}

#intro .intro_wrap {
    background-color: rgba(255,255,255,0.8);
}

.top_cms_box .cms_title h2 {
    color: var(--black);
    font-weight: bold;
}

/********** under_page **********/

#page_title #filter_white{
    background-image: url('./Dup/img/bg_img1.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
	background-color: transparent!important;
	padding-bottom: 180px;
	padding-left: 0;
	padding-right: 0;
}
#page_title h2 span{
    color: #fff;
    text-shadow: 5px 5px 10px var(--black);
    font-weight: normal;
    font-size: 50px;
    letter-spacing: 10px;
    transform: skewX(-10deg);
    display: inline-block;
}

#cms_2-a .cate{
    margin-bottom: 100px;
}
#cms_2-a .cate_title{
    font-size: 30px;
    font-weight: bold;
    padding: 0;
    border: none;
    width: 100%;
    padding-bottom: 20px;
    background-image: linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, var(--color4), var(--color4));
    background-size: 50px 2px, 100% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}
#cms_2-a .cate_box{
    padding: 50px 0;
    background-color: var(--color2);
    align-items: center;
    border-radius: 10px;
}
#cms_2-a .cate_box .box_item:nth-of-type(2){
    padding: 20px 50px;
}
#cms_2-a .cate_box .box_title1{
    padding-top: 0;
    font-weight: bold;
    color: var(--black);
}
#cms_2-a .cate_box .box_txt1{
    padding-bottom: 0;
}


/********** tablet 780 **********/
@media screen and (max-width: 768px){
header{
    padding: 0;
}
#logo {
    width: 41.66667% !important;
    margin-bottom: 0;
    padding-top: 0;
}
#logo .logo {
    width: 120px;
    margin-left: 10px;
}
#header_menu{
    display: none;
}
#header .menu_bt{
    padding-top: 0;
}
#header .menu_bt, .drawer-hamburger {
    display: block
}
#header .menu_bt button{
    margin-left: auto;
}
#contents .con_box .con_img{
    height: initial;
}
#page_title #filter_white {
    padding-top: calc(50px + 12vw);
    padding-bottom: 16vw;
}
#page_title h2 span {
    font-size: 44px;
    letter-spacing: 6px;
}
#cms_2-a .cate_title{
    font-size: 20px;
}
#cms_2-a .cate_box .box_item{
    width: 100%!important;
}
#cms_2-a .cate_box .box_item:nth-of-type(1){
    margin-bottom: 0;
}
#cms_2-a .cate_box .box_item:nth-of-type(1) .box_img1{
    padding-top: 20px;
    margin-bottom: 20px;
}
#cms_2-a .cate_box{
    padding: 20px 0;
}
}

/********** mobile 750 **********/
@media screen and (max-width: 667px){
#page_title h2 span {
    font-size: 22px;
    letter-spacing: 2px;
}
#cms_2-a .cate_box .box_item:nth-of-type(2){
    padding: 20px;
}
#foot_banner {
    width: calc(100% - 90px);
    max-width: 290px;
}
}