﻿/* -----------------------------　body　------------------------------------- */

/* -----------------------------　google font　------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#contents .con_box1,#contents2 .con_box2{position: relative;}
/*リピートなし*/
#custom .custom_wrap:before,#custom .custom_wrap:after,.catch,#contents .con_box1:before,#contents2 .con_box2:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/*--------font--------*/
.con_no,.eigo{
    font-family: 'Cedarville Cursive', cursive;
}

.intro_wrap .eigo {
    font-size: 25px;
}

.en_font, h1, h2, h3, h4, h5, h6, .sns_title, .copyright{
    font-family: 'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

body{
    font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* color -----------------------------------------------------------------------------*/
:root {
    --color1: #2f418b;
    --color2: #d5d9db;
    --color3: #273faf;
    --color4: #f3f3f3;
    --color5: #dce5fa;
    --color6: #03A9F4;
    --white: #ffffff;
    --black: #050823;
    --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);
}
/* color -----------------------------------------------------------------------------*/

/* ---------------------------------------------　TOP　---------------------------------------- */

#wrap{
    overflow: hidden;
}

#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;
}

/* ------------------------　custom　-------------------- */
#custom .custom_wrap {
    background-image: url(./Dup/img/main_img.jpg);
}

.catch {
    background-image: url(./Dup/img/catch.png);
    background-size: 100%;
    width: 29vw;
    height: 100vw;
    max-width: 800px;
    max-height: 500px;
    top: 43%;
    left: 21%;
    z-index: 5;
    filter: drop-shadow(0px 0px 6px rgba(75,105,145,0.5));
}

#menu_stick{
    background-color: var(--color3);
    transition: all 0.3s !important;
}

#menu_stick:hover{
    background-color: var(--color1);
    background: linear-gradient(to right, var(--color3) , var(--color6));
}

#menu_stick:hover {
    transform: scale(1.05,1.05);
}

#pc_nav a {
    display: inline-block;
    color: #fff;
    font-size: 150%;
    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: 120%;
    font-weight: bold;
    text-decoration: none;
    transition: .3s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.grid_6 a:hover {
    -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;
}

#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;
}

#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;
}

#contents2 .con_img {
    opacity: 1;
    top: 100px;
    bottom: 100px;
    left: 0;
}

.con_no{
    font-size: 18px;
}

.box_txt1{
    font-weight: bold;
}


.more a:hover {
    background-color: var(--color1);
    background: linear-gradient(to right, var(--color3) , var(--color6));
}

/* ----------　fix_banner　---------- */
.fix_banner {
    width: 350px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 6;
}

#page_top {
    bottom: 150px;
}

.caution1 {
    font-size: 15px;
    color: var(--red);
}

.caution2 {
    font-size: 15px;
    color: var(--red);
}

/* ---------------------------------　下層ページ　--------------------------------- */

/* ------------------------　BLOG　-------------------- */
/* ----------　pager　---------- */

/* -------------------　よくある質問　----------------- */
.qa_type5 .faq_no {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    top: -10px;
    left: 0;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}
.qa_type5 .box_title1, .qa_type5 .box_txt1 {padding-left: 70px;line-height: 1.7;}

/* ----------　会社情報　---------- */

/* ----------　お問い合わせ　---------- */


/* ----------　プライバシーポリシー ---------- */


/* ----------　サイトマップ　---------- */
@media all and (-ms-high-contrast: none){
  .sample{

  }
}

/*-------------------------------------------------------タブレット-------------------------------------------------------*/
@media screen and (max-width: 768px){
#custom {
    height: 100vh !important;
    width: 100%;
}

#custom .custom_wrap {
    background-image: url(./Dup/img/main_img_tb.jpg);
    background-size: contain;
    width: 100% !important;
    height: 100vh;
}

#custom .custom_wrap::before {
    background-size: 40%;
}

#custom .main_title {
    left: 20px;
    top: 5%;
}

.catch{
    display: none;
}

.en_font, h1, h2, h3, h4, h5, h6, .sns_title {
    font-size: 23px;
}

#intro .pop{
    opacity: 1;
    transform: none;
}

#intro .intro_title,.con_title {
    font-size: 25px;
}

#contents2 .con_wrap{right: 0;opacity: 1}

#contents2 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto;
}

#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);
}

#page_top {
    bottom: 130px;
}

}

/*-------------------------------------------------------スマホ-------------------------------------------------------*/
@media screen and (max-width: 667px){

#custom {
    height: 100vh !important;
    width: 134%;
}

.catch{
    display: none;
}

.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: 20px;
}

#intro .intro_title,.con_title {
    font-size: 19px;
    letter-spacing: 0;
}

.fix_banner {
    width: 250px;
    bottom: 5px;
    right: auto;
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

#page_top {
    bottom: 9px;
}
}

/*20230707動画差込*/
#video video{
width: 100%!important;
height: auto;
}

@media  screen and (max-width: 1600px){
#video video{
width: auto!important;
height: 100%;
}
}

/* タブレット用 */
@media  screen and (max-width: 768px){
#video{ height: 40vh; }
#video video{
width: 100%!important;
height: auto;
}
}

/* スマホ用 */
@media  screen and (max-width: 667px){
#video{ height: 31vh; }
}