﻿@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap');
.mplus{font-family: 'M PLUS Rounded 1c', sans-serif;}


/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #bd3636} /* メインカラー *//*#0D5072修正前*/
.txt_color2{color: #697A84} /* サブカラー */
.txt_color3{color: #302D2A} /* アクセントカラー1 */
.txt_color4{color: #E6EAED} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #bd3636} /* メインカラー *//*#136893修正前*/
.bg_color1_07{background-color: rgba(177, 69, 69, 0.5);}
.bg_color2{background-color: #697A84} /* サブカラー */
.bg_color3{background-color: #302D2A} /* アクセントカラー1 */
.bg_color4{background-color: E6EAED} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #bd3636}/*#136893修正前*/
.border_color2{border-color: #697A84}
.border_color3{border-color: #302D2A}
.border_color4{border-color: #E6EAED}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #bd3636} /* メインカラー */
.hvr_txt_color2:hover{color: #697A84} /* サブカラー */
.hvr_txt_color3:hover{color:#302D2A} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #E6EAED} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #bd3636} /* メインカラー */
.hvr_bg_color2:hover{background-color: #697A84} /* サブカラー */
.hvr_bg_color3:hover{background-color: #302D2A} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #E6EAED} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #bd3636}
.hvr_border_color2:hover{border-color: #697A84}
.hvr_border_color3:hover{border-color: #302D2A}
.hvr_border_color4:hover{border-color: #E6EAED}


/* top*/
/*#wrap #header{
position:relative;
}
#wrap #header::before{
position:absolute;
background-image:url(./dup/img/saikoro.png);
background-repeat:no-repeat;
background-position:top right;
background-size:auto 150%;
content:"";
width:100%;
height:100px;
right:2%;
top:3%;
}*/
#wrap{
background-color: rgba(255, 249, 235, 0.2);
background-image: url(./dup/img/back.png);
background-size: 50%;
}
/*
#catch{
padding-top:80px;
position:relative;
}
#catch::before{
position:absolute;
background-image:url(./dup/img/sozuhai.png);
background-repeat:no-repeat;
background-position:top left;
background-size:auto 100%;
content:"";
width:100%;
height:100px;
top:-2%;
left:5%;
}
#catch h2{
background-color:white;
}
*/
#catch p{
padding-right:30px;
}
/*
#contents{
background-image:url(./dup/img/top_background.jpg);
background-size:45%;
background-repeat:no-repeat;
/*position:relative;*/
}
*/
#contents::before{
position:absolute;
background-image:url(./dup/img/saikoro.png);
background-repeat:no-repeat;
background-position:bottom center;
background-size:auto 150%;
content:"";
width:100%;
height:100px;
bottom:-20px;
left:50%;
}
/*
#contents h2{
background-color:rgba(255,255,255,0.8);
}
#contents .contents_txt p{
background-color: rgba(255,255,255,0.9);
}
#top_cms{
background-color:rgba(255, 249, 235, .7);
}
#top_cms h2{
background-color:white;
}
#footer{
background-color:white;
}
*/
/* page2*/
#cms_1-e .cate_box .box_img1 {
width:60%;
}

/* page3*/
#page3 #cms_2-c #cate0 .cate_box .box_txt1{
position:relative;
padding-left:30px;
}
#page3 #cms_2-c #cate0 .cate_box .box_txt1::before{
position:absolute;
content:"";
width:24px;
height:30px;
top: 0;
left: -5px;
background-image:url(./dup/img/icon.png);
background-size: cover;
background-repeat:no-repeat;
}

/* page4*/
#page4 #cms_6-b .cate_title{
background-color:#bd3636;
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#header::before{
right:20%;
top:4%;
}
#catch::before{
top:0%;
}
#contents{
background-image:none;
}
#contents::before{
left:30%;
bottom:-50px;
}
.youtube{
width:25%!important;
}
.gotop{
bottom: 67px!important;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header::before{
background-image:none;
}
#catch::before{
background-size:auto 60%;
top:0%;
}
#contents::before{
bottom:-50px;
}
p.gotop a {
left: 9px;
}

/*---------------------------------
動画
---------------------------------*/
#main_img .inner{
padding-bottom:0;
}
#main_img.width_70per{
width:100%;
}
}
/*---------------------------------
修正
---------------------------------*/
/* 全体 */
#header .inner.width_60per{width: 65%!important;}
#footer_info{position: relative;}
#footer_info:before{
content: "";
display: block;
background-color: rgba(20,105,150,0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* TOP */
#catch > div.grid_6:first-of-type{position: relative;}
#catch > div.grid_6:first-of-type:before,#catch > div.grid_6:first-of-type:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
}
#catch > div.grid_6:first-of-type:before{
background-image: url(./Dup/img/illust1.png);
width: 150px;
height: 150px;
bottom: -30px;
right: -50px;
}
#catch > div.grid_6:first-of-type:after{
background-image: url(./Dup/img/illust2.png);
width: 130px;
height: 150px;
top: -30px;
left: -20px;
}
#contents .contents_inner{position: relative;}
#contents .contents_inner:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
background-image: url(./Dup/img/illust3.png);
width: 160px;
height: 150px;
bottom: -30px;
right: -38px;
}
@media screen and (max-width: 768px){
#catch > div.grid_6:first-of-type:after{ top: 15px;}
#contents .contents_inner .contents_txt p{padding: 20px;}
#contents .contents_inner:before{bottom: auto;top: 440px;}
}
@media screen and (max-width: 667px){
.index_header #logo, #logo{max-width: 130px;}
.hamburger{top: 14px;right: 10px;}
#catch > div.grid_6:first-of-type:before{width: 100px;height: 100px;right: -34px;}
#catch > div.grid_6:first-of-type:after{width: 86px;height: 100px;top: -20px;}
#contents .contents_inner:before{width: 100px;height: 94px;top: 240px;right: -10px;}
}

/*---------------------------------
2020_4_2修正
---------------------------------*/
#footer_info:before{
background-color:rgba(68, 12, 12, 0.5);
}
#cms_2-c #cate0 .txt_color1{
color:black;
} 
/*---------------------------------
2020_4_10修正
---------------------------------*/
/*--------------------------IE--------------------------*/
@media all and (-ms-high-contrast: none) {
.youtube{
bottom:-3px!important;
  }
}
.header_sns{
width:17%;
margin-top: 45px!important;
margin-bottom: 10px!important;
}
.header_sns a:hover{
opacity:.4;
}
.header_sns2{
width:90%;
}
.header_sns2 a:hover{
opacity:.4;
}
p.gotop a {display:inline-block;}
.youtube{width:386px!important;
bottom:6px;margin-left:5px;
}
.retop{
border: 1px solid #fff;
}
@media screen and (max-width: 768px){
.youtube{
width:343px!important;
bottom:8px;margin-left:5px;
}
#bottom_menu{
margin-bottom:75px;
}
.footer_cms .pd_b-50px {
padding-bottom: 0px;
}
}
@media screen and (max-width: 667px){
.youtube{
width:293px!important;
bottom:7px;margin-left:5px;
}
.gotop {
bottom: 65px!important;
left: 6px;
}
footer .footer_cms {
margin-bottom:20px;
}
.footer_cms .pd_b-50px {
padding-bottom: 50px;
}
}




