﻿H2, h3, #main_menu ul li a {
font-family: 'RocknRoll One', sans-serif !important;
}
/* color */
.txt_color_nomal{color: #212121;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #1e90ff} /* メインカラー */
.txt_color2{color: #EFEFEF} /* サブカラー */
.txt_color3{color: #007aff} /* アクセントカラー1 */
.txt_color4{color: #4ea8e4} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #1e90ff} /* メインカラー */
.bg_color2{background-color: #EFEFEF} /* サブカラー */
.bg_color3{background-color: #8C6239} /* アクセントカラー1 */
.bg_color4{background-color: #4ea8e4} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #1e90ff}
.border_color2{border-color: #EFEFEF}
.border_color3{border-color: #1e90ff}
.border_color4{border-color: #4ea8e4}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #212121;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #1e90ff} /* メインカラー */
.hvr_txt_color2:hover{color: #EFEFEF} /* サブカラー */
.hvr_txt_color3:hover{color: #8C6239} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #4ea8e4} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #1e90ff} /* メインカラー */
.hvr_bg_color2:hover{background-color: #EFEFEF} /* サブカラー */
.hvr_bg_color3:hover{background-color: #8C6239} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #4ea8e4} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #1e90ff}
.hvr_border_color2:hover{border-color: #EFEFEF}
.hvr_border_color3:hover{border-color: #8C6239}
.hvr_border_color4:hover{border-color: #4ea8e4}

#page8 .txt_color2 {
    color: #007aff;
}
#page8 .border_color2 {
    border-color: #5b5b5b;
}
#contents1 .txt3 {
    margin-left: 20px;
}
#cms_2-a .cate_list a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}
#main_menu ul li a {
    font-weight: bold;
    font-size: 17px;
}
#main_menu ul li a::before {
    background-color: #1e90ff;
}
#main_img {
    z-index: 1;
    overflow: hidden;
    position: relative;
    max-height: 100vh;
    min-height: 100%;
}
.top_header {
	background-image: url("./Dup/img/header.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.con3_banner:hover {
  opacity: 0.6;
}
.main_box .txt1 {
    width: 35%;
}
#main_img img {
    max-height: 100%;
    min-height: 50%;
}
.contact_mail {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
}
#contact_tel .width_300-max {
    max-width: 350px;
}
.contact_mail .pd_30px {
    padding: 30px 5px;
    max-width: 350px;
}
/*
#cms_2-c .cate_box:nth-child(even) .flex_order2 {
　　-webkit-box-ordinal-group:1 !important;
　　-ms-flex-order:1 !important;
　　-webkit-order:1 !important;
　　order:1 !important;
}
#cms_2-c .cate_box:nth-child(even) .flex_order1 {
　　-webkit-box-ordinal-group:2 !important;
　　-ms-flex-order:2 !important;
　　-webkit-order:2 !important;
　　order:2 !important;
}
*/
.top_header:after {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/header.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0px;
    right: -27px;
    width: 14%;
    height: 100%;
}
.mybox:after {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/ue.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -156px;
    right: 0px;
    width: 100%;
    height: 150px;
}
#contents1 {
    position: relative;
   background-color: #4ea8e4;
    padding: 50px 30px;
    /* border-radius: 30px; */
    margin: 30px auto;
    border: 5px solid #1e90ff;
}
#contents1:before {
    border-top: 5px solid #fcee21;
    border-right: 5px solid #fcee21;
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 50px;
    height: 50px;
    z-index: 1;
}
#contents1 h2 {
    color: #fcee21;
    text-align: center;
}
#contents1 p {
	color: #ffffff;
}

#contents2 .d_flex {
	position: relative;
}
#contents2 .d_flex:before {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/smile.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    width: 170px;
    height: 170px;
    top: -34px;
    left: -37px;
}


.cms_title::before {
    content: "";
    width: 70px;
    height: 70px;
    background-image: url(./Dup/img/para.png);
    background-color: rgba(255, 255, 255, 0);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    position: absolute;
    top: 22%;
    left: -17px;
    -ms-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}

#cms_5-a .box_title1:before {
    position: absolute;
    content: '';
	background-image: url("./Dup/img/men2.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom left;
    bottom: 10%;
    left: 30px;
    width: 40px;
    height: 40px;
}
#page_title .page_box::before {
    background-color: #1e90ff;
}

#page_title .txt_shadow-b {
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0);
}
#main_img h2 {
        top: 68%;
}

.memox{
position:relative;
background:#fffde7;
width:85%;
margin:2em auto;
padding:1.5em 1em;
transform: rotate(-2deg);
box-shadow:1px 1px 4px rgba(0,0,0,0.2);
color:#795548;
}
/*.memox::before{
content:'ここがポイント';
position:relative;
display:inline-block;
border-bottom:3px solid #795548;
border-radius: 0 0 40% 5% / 0 0 15% 20%;
padding:0 1em 0.1em 0.2em;
font-size:110%;
font-weight:bold;
transform: rotate(-5deg);
}*/
.memox::after{
content:'';
position:absolute;
left:50%;
top:-15px;
margin-left:-75px;
width:150px;
height:30px;
background:rgba(245,245,245,0.7);
box-shadow:1px 1px 4px rgba(0,0,0,0.2);
transform: rotate(-4deg);
}
.memox ol{
margin:1em 0.5em 0 2em;
padding:0 0 0 0;
}
.memox ol li{
margin-bottom:0.5em;
}




.mybox {
    border: 5px solid #fff;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    z-index: 1;
    width: 80%;
}
.mybox:before {
	border-top: 5px solid #fcee21;	/* 一部だけ異なる線の太さ・種類・色 */
	border-left: 5px solid #fcee21;	/* 一部だけ異なる線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	z-index: 1;
}
header .head_box .link_box {
    padding-bottom: 0px;
}
/***************top_slider***************************/
.loopSliderWrap{
top: 0;
left: 0;
height: 250px;
}
.loopSlider{
margin: 0 auto;
height: 250px;
position: relative;
overflow: hidden;
}
.loopSlider ul{
float: left;
overflow: hidden;
}
.loopSlider ul li{
width: 250px;
height: 250px;
float: left;
display: inline;
overflow: hidden;
position: relative;
box-sizing: border-box;
}

/*clearfix*/
.loopSliderWrap:after{
content: "";
display: none;
clear: none;
}



/*****************トップギャラリー*********************/
.cms_4-a .top_ga {
    padding: 0px;
}
/*************************************/
/**********吹きだし******************/
#cms_5-a .box_title1 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0 2em;
    background: #4ea8e4;
    color: #ffffff;
    font-weight: bold;
    width: 55%;
}

#cms_5-a .box_title1:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #4ea8e4;
    width: 0;
    height: 0;
}
#cms_5-a .box_title1:before {
    position: absolute;
    content: '';
    background-image: url(./Dup/img/men2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    bottom: -60px;
    left: 25px;
    width: 40px;
    height: 40px;
}
.box24 p {
    margin: 0; 
    padding: 0;
}
#cms_5-a .font_2dw_tb {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0 8em auto;
    background: #fcee21;
    color: #222;
    font-weight: bold;
    width: 55%;
}
#cms_5-a .font_2dw_tb:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #fcee21;
    width: 0;
    height: 0;
}
#cms_5-a .font_2dw_tb:before {
    position: absolute;
    content: '';
    background-image: url(./Dup/img/men1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    bottom: -60px;
    right: 25px;
    width: 40px;
    height: 40px;
}
#cms_5-a .box_wrap {
    padding: 20px 20px 50px;
}
.box24 p {
    margin: 0; 
    padding: 0;
}
/**************************************/
/* YouTube */
.yt{width: 800px;}
.video_cms{
	padding-bottom: 50.25%;
	height: 0;
}
.pc_box #logo {
    max-width: 200px;
}



#main_img {
    position: relative;
}
#main_img:after {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/kuro.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* YouTube */
.yt{width: 100%;}
#main_img {
    margin-top: -3px;
}
main {
    margin-top: -3px;
}
#logo img {
        width: 30% !important;
}
.pc_box {
    text-align: center;
}
.shop {
    position: fixed;
    top: 96px;
    z-index: 5;
    right: 5px;
    width: 250px;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.hp_btn {
 width: 200px;
}
.contact_mail {
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}
.con3_banner {
    width: 70%!important;
}
.loopSliderWrap{
height: 150px;
}
.loopSlider{
height: 150px;
}
.loopSlider ul li{
width: 150px;
height: 150px;
}
/* YouTube */
.video_cms {padding-bottom: 56.25%;}
.mybox:after {
    top: -87px;
    right: 0;
    width: 118%;
    height: 150px;
}
#cms_5-a .box_title1 {
    width: 63%;
}
#cms_5-a .font_2dw_tb {
    width: 63%;
}
#cms_5-a .box_title1:before {
    left: 5px;
}
#cms_5-a .font_2dw_tb:before {
    right: 5px;
}
.hamburger {
    top: 15px;
    right: -2px;
}
#logo img {
    width: 25% !important;
}
.main_box {
    padding-top: 60px;
    margin-top: 20px;
}
.shop {
    position: fixed;
    top: 83px;
    z-index: 5;
    right: 0px;
    width: 200px;
}
}
@media all and (-ms-high-contrast:none) {
#cms_2-a .cate .cate_title {
    padding-top: 10px !important;
}
.cate_list a {
    padding: 10px 10px 8px !important;
}
/*@media all and (-ms-high-contrast:none)*/
#cms_2-b .cate .cate_title {
    padding-top: 8px !important;
}
/*@media all and (-ms-high-contrast:none)*/
#cms_5-a .cate .cate_title span:last-of-type {
    padding-top: 0px !important;
}

}