﻿@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

body, .font_sans-serif, .font_bar{
    font-family: var(--font-jp2)!important;
}

:root{
    --font-jp: 'Inria Serif', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;!important;
    --font-jp2: 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;!important;
    --font-en: 'Inria Serif', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;!important;
    --font_bar: 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;!important;
    --font-en2: 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;!important;
}

.font_en2, header #header #header_menu ul, .more, #bottom_menu, #page10, #footer_nav ul a,.tel_bt, #intro .intro_no,.en_font, h1, h2, h3, h4, h5, h6, .sns_title, .con_no,.footer_txt,.copyright{
    font-family: var(--font-en2)!important;
}
.font_bold{
    font-weight: normal;
}

html, body{
    font-size:-webkit-calc(1rem + 2px)!important;
    font-size : calc(1rem + 2px)!important;
}

/* color -----------------------------------------------------------------------------*/
:root {
    --color1: #FDCA3F;
    --color2: #f7bc1c;
    --color3: #f5dc97;
    --color4: #fffae8;
    --color5: #fbf0d2;
    --color6: #f7b500;
    --white: #ffffff;
    --black: #4a3a10;
    --gray: #ccc;
    --red: #f00;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{
    color: var(--color1);
    border-bottom:solid 1px;
}

.linkStyle:hover{
	color: var(--color3);
	opacity: 0.7;
	transition: all 0.5s;
}

body#body {
    background: var(--white);
}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#contents .con_box1,#contents2 .con_box2,#top_cms .cms_box, #top_cms .cms_box:nth-child(3) div.width_1280-max{position: relative;}
/*リピートなし*/
#custom .custom_wrap:before,#custom .custom_wrap:after,#contents .con_box1:before,#contents2 .con_box2:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}


/* -----------------------------　top------------------------------------- */
#wrap{
    overflow: hidden;
}

#custom .custom_wrap.trans{height: 100vh!important;}

#intro .intro_left {
    background-image: url(./Dup/img/bg_img1.jpg);
    background-position: center;
    background-size: cover;
    background-color: rgba(253 255 226 / 50%);
}

.intro_title {
    font-weight: bold;
}

p.intro_txt {
    font-weight: 500;
}

img.main_logo {
    z-index: 2;
    top: 2%!important;
    left: 2%!important;
    width: 40%;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));
}

/* ------------------------　custom　-------------------- */
/*#custom .custom_wrap {*/
/*    background-image: url(./Dup/img/main_img.jpg);*/
/*}*/

.catch {
    position: absolute;
    object-fit: contain;
    max-width: 800px;
    top: 55%!important;
    left: 3%!important;
    width: 26%;
    z-index: 2;
    bottom: auto;
}

#menu_stick{
    background-color: var(--color1);
    transition: all 0.3s !important;
}

#menu_stick:hover{
    background-color: var(--color2);
}

#menu_stick:hover {
    transform: scale(1.05,1.05);
}

#pc_nav a {
    display: inline-block;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    transition: .3s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#pc_nav a:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.grid_6 a {
    color: #1a1a1a;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    transition: .3s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.grid_6 a:hover {
    color: var(--color1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

#pp-nav li a, .pp-slidesNav li a{
    color: var(--color6)
}

#wrap{overflow: hidden;}

.font_bold {
    font-weight: 500;
}

.con_box1, .con_box2 {
    background: var(--color6);
    border: solid 3px;
}

#intro.trans .intro_left h1{
    margin-bottom: 25px;
}

#top_cms .cms_box:nth-child(3):before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 150%;
    height: 100%;
    background-image: url(../img/face.png);
    background-size: contain;
    vertical-align: middle;
    background-color: var(--color4);
    transform: skew(-5deg,-5deg) translateY(-50%) translateX(-50%);
    left: 50%;
    top: 50%;
}


#contents2 .con_wrap{right: -10px}

#contents2.trans .con_wrap{
	opacity: 1;
	right: 0;
}

#contents2 .con_bg{
	top: 0;
	right: 0
}
#contents2 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0
}


#contents2 .con_box1::before{
	width: 40px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: #fff
}

#contents .slash, #contents2 .slash {
     padding: 0 25px;
}


.con_wrap.grid_6.grid_11_tb.grid_12_sp.pd_l-100px.pd_r-150px.pd_l-50px_tb.pd_r-50px_tb.pd_t-100px.pd_b-100px.pd_t-50px_sp.pd_l-20px_sp.pd_r-20px_sp.mg_center_tb.txt_white.posi_rel.opacity0.motion05s {
    opacity: 1;
}

.cms_title h3 {
    font-size: 30px;
    color: var(--color2);
}

#custom .custom_wrap:before{
background-color: #506f9d;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.2;
mix-blend-mode: overlay;
}

#custom .custom_wrap:after{
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.1;
mix-blend-mode: multiply;
}

.con_no{
    font-size: 18px;
}

.box_txt1{
    font-weight: bold;
}

.more a{
    background-color: var(--color1);
}

.more a:hover {
    background-color: var(--color2);
}

footer {
    background-color: var(--color4) !important;
}

footer .footer_bg {
    background-color: var(--color4);
}

#footer_nav ul a:hover {
    color: var(--color6);
}

#sns_links ul a:hover {
    color: var(--color2);
}

/* ----------　fix_banner　---------- */

#fix_banner {
    position: fixed;
    bottom: 10px;
    z-index: 6;
    width: 50%;
    max-width: 300px;
    right: 110px;
}

#page_top {
    bottom: 10px;
}

.caution1 {
    font-size: 15px;
    color: var(--red);
}

.caution2 {
    font-size: 15px;
    color: var(--red);
}

#sns_links img {
    margin-top: 5px;
}

/* ---------------------------------　下層ページ　--------------------------------- */


/* ------------------------　BLOG　-------------------- */
#page02 .cate {
    padding: 50px;
    background-color: var(--color5);
}

#cms_1-e .date {
    background-color: var(--color1);
    left: -10px;
    top: 20px;
}

.pager li a {
    color: var(--color4);
    font-weight: bolder;
    font-size: 15px;
}

/* -------------------　ご利用の流れ　----------------- */
.flow_type1 .cate_box{border-left:none;background-color: rgba(0,0,0,0);}
.flow_type1 .box_txt1,
.flow_type1 .box_txt2{padding-left:130px;}

.flow_type1 .box_wrap{
    position: relative;
    padding-left: 30px;
}
.flow_type1 .box_wrap:before {
    content: "";
    display: inline-block;
    height: calc(100% - 0px);
    border-left: 14px solid var(--color5);
    position: absolute;
    top: -5px;
    left: 107px;
}

.flow_type1 .box_txt1{position:relative;}
.flow_type1 .box_txt1::before,
.flow_type1 .box_txt1::after {
	content: "";
	display: block;
	position: absolute;
	top: 18px;
}
.flow_type1 .box_txt1::before {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: var(--color6);
    border-radius: 50%;
    left: 61.5px;
}

.flow_type1 .box_txt1::after {
	width: 50px;
	border-bottom: 1px dashed #999;
	position: absolute;
	left: 72px;
}
.flow_type1 .box_description2{
    position: relative;
    border-left: none;
    background-color: rgba(255, 255, 255, 0);
}
.flow_type1 .box_description2 span{
position: absolute;
    display: inline-block;
    width: 90px;
    top: -23px;
    left: -50px;
}
/*--------タブレット--------*/
@media screen and (max-width: 768px){
.flow_type1 .flex_order2_tb{
    width: 78%!important;
    margin-left: auto;
}
}
/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.flow_type1 .box_description2 span {
    width: 70px;
}
.flow_type1 .box_wrap{
    padding-left: 23px;
}
.flow_type1 .box_wrap:before {
    left: 22px;
}
.flow_type1 .box_txt1::before, .flow_type1 .box_txt1::after {
    top: 58px;
}
.flow_type1 .box_txt1::before {
    margin-top: -3px;
    left: -17.5px;
}
.flow_type1 .box_txt1::after {
    width: 30px;
    left: -8px;
}
.flow_type1 .box_txt1, .flow_type1 .box_txt2 {
    padding-left: 30px;
}
.flow_type1 .box_txt1{
    padding-top: 46px;
}
.flow_type1 .flex_order2_tb {
    width: 87%!important;
}
}

/* ------------------------　相談内容　-------------------- */
.link_type3{padding-bottom: 50px;}
.link_type3 .link_img1 {z-index: 1;}
.link_type3 .cate_box a:hover .link_img1 img {transform: translate(-50%, -50%) scale(1.05,1.05);}
.link_type3 .link_title1 {
    left: 1px;
    bottom: 1px;
    width: calc(100% - 2px);
    box-sizing: border-box;
}
.link_type3 .cate_box a .link_title1 {transition-timing-function: cubic-bezier(.78,.09,.27,1.36);}
.link_type3 .cate_box a:hover .link_title1 {bottom: -47px;}
	
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){	
.link_type3{padding-bottom: 0;}
}

/* ----------　会社情報　---------- */

/* ----------　お問い合わせ　---------- */
#tel_txt h3 {
    font-size: 16px;
}

/* ----------　プライバシーポリシー ---------- */


/* ----------　サイトマップ　---------- */
@media all and (-ms-high-contrast: none){
  .sample{

  }
}

@media screen and (max-width: 1530px){
html, body {
    font-size: -webkit-calc(1rem + -2px)!important;
    font-size: calc(1rem + -2px)!important;
}

#intro.trans .intro_left h1{
    margin-bottom: 80px;
}

.con_box1{
    padding-top: 85px !important;
}

.con_box1 .con_title, .con_box2 .con_title{
    font-size: 20px;
}

.con_box2 {
    padding-top: 37px !important;
    padding-bottom: 50px !important;
}

}
/*-------------------------------------------------------タブレット-------------------------------------------------------*/
@media screen and (max-width: 768px){
html, body {
    font-size: -webkit-calc(1rem + 2px)!important;
    font-size: calc(1rem + 2px)!important;
}


#custom {
    height: 40vh !important;
    width: 100%;
}

#custom .custom_wrap::before {
    background-size: 40%;
}

#custom .main_title {
    left: 20px;
    top: 5%;
}

img.main_logo {
    width: 25%;
}

.catch {
    top: 16%!important;
    left: 1%!important;
    width: 39%;
}

.en_font, h1, h2, h3, h4, h5, h6, .sns_title {
    font-size: 23px;
}

#intro .pop{
    opacity: 1;
    transform: none;
}

#intro .intro_title, .con_title {
    letter-spacing: 0;
    font-size: 26px !important;
}

#contents2 .con_wrap{right: 0;opacity: 1}

#contents .con_img {
    height: 72vw!important;
}

#contents2 .con_img {
    top: 0;
    height: 74vw!important;
}


#contents .con_img::before, #contents2 .con_img::before{
    width: calc(100% - 40px);
    height: 10px;
    top: -10px;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
    background-image: linear-gradient(to right, #191970, #0084B2);
}

.info_title {
    font-size: 14px;
}

#fix_banner {
    max-width: 250px;
    right: 60px;
}

}

/*-------------------------------------------------------スマホ-------------------------------------------------------*/
@media screen and (max-width: 667px){
html, body {
    font-size: -webkit-calc(1rem + -2px)!important;
    font-size: calc(1rem + -2px)!important;
}

.catch {
    top: 23%!important;
}

#pc_nav a {
    font-size: 100%;
}

.en_font, h1, h2, h3, h4, h5, h6, .sns_title{
    font-size: 18px;
}

#logo img{
    max-width: 250px;
}

#page_title::before{
    width: calc(100% - 40px);
}

#page_title .title_wrap p{
    letter-spacing: 0;
}

.cate_title {
    font-size: 17px;
}

#intro .intro_title, .con_title {
    font-size: 17px !important;
    letter-spacing: -1px;
}

#sns_links img {
    margin-top: 5px;
}

#page_top {
    bottom: 10px;
}

.copyright {
    padding-bottom: 50px;
}

}

#video{
    position:relative;
}
#video::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    z-index:1;
}

@media (max-width: 768px) {
div#video {
    height: 40vh;
}

video.video.width_100per {
    width: 100%;
    height: 40vh;
    object-fit: cover;
}
}

/*div#video, video {*/
/*    object-fit: cover;*/
/*    height: 100% !important;*/
/*    width: 100% !important;*/
/*}*/

/*#video{*/
/*    position:relative;*/
/*}*/
/*#video::before{*/
/*    content:'';*/
/*    position:absolute;*/
/*    display:block;*/
/*    width:100%;*/
/*    height:100%;*/
/*    background-color:rgba(0,0,0,0.1);*/
/*    top:0;*/
/*    left:0;*/
/*    z-index:1;*/
/*}*/

/*@media (max-width: 768px) {*/
/*#custom .custom_wrap.trans {*/
/*    height: 40vh!important;*/
/*    position: relative;*/
/*}*/

/*div#video {*/
/*    height: 40vh;*/
/*}*/
/*video.video.width_100per {*/
/*    width: 100%;*/
/*    height: 40vh;*/
/*    object-fit: cover;*/
/*}*/
/*}*/

/*20230825*/
/*.intro_img1, .intro_img2, .intro_img3 {*/
/*    display: inline-block;*/
/*    border: 9px solid var(--color4);*/
/*}*/



