﻿@charset "utf-8";


/* CSS ドキュメント */
body {
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
}
header{

}
/*fadebody
**********************/
@keyframes fadebody {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadebody {
    0% {opacity: 0}
    100% {opacity: 1}
}


/************************
       LOADING
************************/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1000;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #ffb860;
  z-index: 1100;
}


main {
	width: 100%;
	margin: 0 auto;
}

a {
	display: block;
	color: inherit;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a:hover {
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}



/*ボタン
**********************/

.btn {
	width: 10em;
	background: #fff;
	border: 1px solid #000;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.btn:hover {
	background: #000;
	color: #fff;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}


/*リボン
**********************/
 .ribbon {
    display: inline-block;
    position: relative;
	width: 80%;
    height: 45px;
	top: -35px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
	z-index: 10;
}

.ribbon:before{/*左側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: -2;
    border: 20px solid #56adf3;
    border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon:after{/*右側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: -2;
    border: 20px solid #56adf3;
    border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon h2 {
    display: inline-block;
    position: relative;
	width: 84%;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    color: #FFF;
    background: #2196F3;/*真ん中の背景色*/
}

.ribbon h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #397eb5;/*左の折り返し部分*/
}

.ribbon h2:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #397eb5;/*右の折り返し部分*/
}


/*アニメーション線
**********************/
@keyframes border_lr {
	from {width: 0;}
	to {width: 100%;}
}

.border {
 animation-name: border_lr;
 animation-duration: 3s;
 animation-timing-function: ease;
 animation-delay: 1s;
 animation-iteration-count: 1;
 animation-fill-mode: both;
 width: 0;
 height: 1px;
 background: #fff;
 margin-left: auto;
 margin-right: auto;
}


/*点滅
**********************/
.switch {
 -webkit-animation: switchtext 0.5s infinite alternate;
 -moz-animation: switchtext 0.5s infinite alternate;
 animation: switchtext 0.5s infinite alternate;
}
@-webkit-keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@-moz-keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}


/*コンテンツ幅
**********************/
.inbox {
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	padding: 0 10px;
	margin: 0 auto;
}

.inbox2 {
  width: 55%;
  max-width: 630px;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0 auto;
}

.center {
	margin-left: auto;
	margin-right: auto;
	}

.txt-c {text-align: center;}

.txt-l {text-align: left;}

.txt-r {text-align: right;}


/******************
　　　　 img
*******************/
img.sp-img {
width: 100%;
height:auto;
}

img {
  width: 100%;
  line-height: 0;
  display: block;
}

/*切り抜き
******************/

.fit-img img {
width: 100%;
height: 500px;
object-fit: cover;
}

.object-fit-img {
object-fit: contain;
font-family: 'object-fit: contain;'
}


/******************
　　　　　SP表示
*******************/
.none {
	display: none;
}

.sp-none {
	display: block;
}

@media screen and (max-width:599px) {
.none {
	display: block;
}

.sp-none {
	display: none!important;
}
}


/******************
　　　　　font
*******************/
@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2')
     format("woff2");
}

.hannari {font-family: はんなり明朝;}

.gothick {font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;}

.mincho {font-family: "Sawarabi Mincho";}

h1 {
	font-size: 2em;
	font-weight: bold;
}

h1.font18 {font-weight: normal;}

h2 {
	font-size: 1.5em;
}

/*フォントサイズ*/
.font14 {font-size: 14px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}
.font25 {font-size: 25px;}
.font30 {font-size: 30px;}
.font40 {font-size: 40px;}
.font50 {font-size: 50px;}
.font60 {font-size: 60px;}

/*bold*/
.bold {font-weight: bold;}

/*フォントカラー*/
.red {color: #ff6464;}
.red2 {color: #a71a1a;}
.yellow {color: #ffdd39;}
.orange {color: #ffb300;}
.green {color: #079c49;}
.blue {color: #00b7ef;}
.glay {color: #aaa;}
.white {color: #fff;}
.purple {color: #cb005c;}
.pink {color: #ea68a2;}
.brown {color: #aa9e48;}


/******************
　　　　　ブラインド
*******************/
.blind {background: rgba(0,0,0,0.5);}


/*****************
　 　　　margin
******************/

/*top*/
.mgn-t10 {margin-top: 10px !important;}

.mgn-t20 {margin-top: 20px !important;}

.mgn-t30 {margin-top: 30px !important;}

.mgn-t40 {margin-top: 40px !important;}

.mgn-t50 {margin-top: 50px !important;}

.mgn-t60 {margin-top: 60px !important;}

.mgn-t70 {margin-top: 70px !important;}

.mgn-t80 {margin-top: 80px !important;}

.mgn-t90 {margin-top: 90px !important;}

.mgn-t100 {margin-top: 100px !important;}

/*bottom*/
.mgn-b10 {margin-bottom: 10px !important;}

.mgn-b20 {margin-bottom: 20px !important;}

.mgn-b30 {margin-bottom: 30px !important;}

.mgn-b40 {margin-bottom: 40px !important;}

.mgn-b50 {margin-bottom: 50px !important;}

.mgn-b60 {margin-bottom: 60px !important;}

.mgn-b70 {margin-bottom: 70px !important;}

.mgn-b80 {margin-bottom: 80px !important;}

.mgn-b90 {margin-bottom: 90px !important;}

.mgn-b100 {margin-bottom: 100px !important;}

/*top-bottom*/

.mgn-tb10 {margin-top: 10px !important; margin-bottom: 10px !important;}

.mgn-tb20 {margin-top: 20px !important; margin-bottom: 20px !important;}

.mgn-tb30 {margin-top: 30px !important; margin-bottom: 30px !important;}

.mgn-tb40 {margin-top: 40px !important; margin-bottom: 40px !important;}

.mgn-tb50 {margin-top: 50px !important; margin-bottom: 50px !important;}

.mgn-tb60 {margin-top: 60px !important; margin-bottom: 60px !important;}

.mgn-tb70 {margin-top: 70px !important; margin-bottom: 70px !important;}

.mgn-tb80 {margin-top: 80px !important; margin-bottom: 80px !important;}

.mgn-tb90 {margin-top: 90px !important; margin-bottom: 90px !important;}

.mgn-tb100 {margin-top: 100px !important; margin-bottom: 100px !important;}

/*left*/
.mgn-l10 {margin-left: 10px !important;}

.mgn-l20 {margin-left: 20px !important;}

.mgn-l30 {margin-left: 30px !important;}

.mgn-l40 {margin-left: 40px !important;}

.mgn-l50 {margin-left: 50px !important;}

/*right*/
.mgn-r10 {margin-right: 10px !important;}

.mgn-r20 {margin-right: 20px !important;}

.mgn-r30 {margin-right: 30px !important;}

.mgn-r40 {margin-right: 40px !important;}

.mgn-r50 {margin-right: 50px !important;}

/*left-right*/
.mgn-lr10 {margin: 0 10px !important;}

.mgn-lr20 {margin: 0 20px !important;}

.mgn-lr30 {margin: 0 30px !important;}

.mgn-lr40 {margin: 0 40px !important;}

.mgn-lr50 {margin: 0 50px !important;}

/*left-right*/
.mgn-a {
	margin-left: auto;
	margin-right: auto;
	}


/*****************
　 　　 padding
******************/

/*top*/
.pdg-t10 {padding-top: 10px !important;}

.pdg-t20 {padding-top: 20px !important;}

.pdg-t30 {padding-top: 30px !important;}

.pdg-t40 {padding-top: 40px !important;}

.pdg-t50 {padding-top: 50px !important;}

.pdg-t60 {padding-top: 60px !important;}

.pdg-t70 {padding-top: 70px !important;}

.pdg-t80 {padding-top: 80px !important;}

.pdg-t90 {padding-top: 90px !important;}

.pdg-t100 {padding-top: 100px !important;}

/*bottom*/
.pdg-b10 {padding-bottom: 10px !important;}

.pdg-b20 {padding-bottom: 20px !important;}

.pdg-b30 {padding-bottom: 30px !important;}

.pdg-b40 {padding-bottom: 40px !important;}

.pdg-b50 {padding-bottom: 50px !important;}

.pdg-b60 {padding-bottom: 60px !important;}

.pdg-b70 {padding-bottom: 70px !important;}

.pdg-b80 {padding-bottom: 80px !important;}

.pdg-b90 {padding-bottom: 90px !important;}

.pdg-b100 {padding-bottom: 100px !important;}

/*top-bottom*/
.pdg-tb10 {padding-top: 10px !important; padding-bottom: 10px !important;}

.pdg-tb20 {padding-top: 20px !important; padding-bottom: 20px !important;}

.pdg-tb30 {padding-top: 30px !important; padding-bottom: 30px !important;}

.pdg-tb40 {padding-top: 40px !important; padding-bottom: 40px !important;}

.pdg-tb50 {padding-top: 50px !important; padding-bottom: 50px !important;}

.pdg-tb60 {padding-top: 60px !important; padding-bottom: 60px !important;}

.pdg-tb70 {padding-top: 70px !important; padding-bottom: 70px !important;}

.pdg-tb80 {padding-top: 80px !important; padding-bottom: 80px !important;}

.pdg-tb90 {padding-top: 90px !important; padding-bottom: 90px !important;}

.pdg-tb100 {padding-top: 100px !important; padding-bottom: 100px !important;}

/*left*/
.pdg-l10 {padding-left: 10px !important;}

.pdg-l20 {padding-left: 20px !important;}

.pdg-l30 {padding-left: 30px !important;}

.pdg-l40 {padding-left: 40px !important;}

.pdg-l50 {padding-left: 50px !important;}

/*right*/
.pdg-r10 {padding-right: 10px !important;}

.pdg-r20 {padding-right: 20px !important;}

.pdg-r30 {padding-right: 30px !important;}

.pdg-r40 {padding-right: 40px !important;}

.pdg-r50 {padding-right: 50px !important;}

/*left-right*/
.pdg-lr10 {padding-left: 10px !important; padding-right: 10px !important;}

.pdg-lr20 {padding-left: 20px !important; padding-right: 20px !important;}

.pdg-lr30 {padding-left: 30px !important; padding-right: 30px !important;}

.pdg-lr40 {padding-left: 40px !important; padding-right: 40px !important;}

.pdg-lr50 {padding-left: 50px !important; padding-right: 50px !important;}

/*****************
　　　　　float
******************/
.float-l {
	float: left;
}

.float-r {
	float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}


/*****************
　　　　　column
******************/

.clm1-1,.clm1-2 {
	width: 50%;
	box-sizing: border-box;
}


.clm2-1 {
	width: 25%;
	max-width: 250px;
	box-sizing: border-box;
	padding-top: 25%;
	background: #f00;
}

.clm2-2 {
	width: 75%;
	max-width: 750px;
	box-sizing: border-box;
	padding-top: 25%;
	background: #00f;
}

.clm1-1-1 {
	width: 33%;
	max-width: 333px;
	box-sizing: border-box;
	padding-top: 33%;
	background: #0f0;
}

.clm1-1-1:nth-child(2) {
	background: #0a0;
	margin: 0 0.5%;
}

.clm1-1-1:nth-child(3) {
	background: #050;
	position:
}


/*****************
　　　column:flex
******************/
.flex {display: flex;}

.flex-sb {justify-content: space-between;}

.flex-c {justify-content: center;}

.flex-l {justify-content: flex-start;}

.flex-r {justify-content: flex-end;}

.flex-a {justify-content: space-around;}

.flex-wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.flex-logo li:first-child {margin-right: auto;}

.flex-al-c {align-items: center;}

.flex-al-t {align-items: start;}

.flex-al-b {align-items: flex-end;}

.flex-logo li:first-child {
  margin-right: auto;
  width: 41%;
  max-width: 175px;
}




/****************
    ページトップボタン
*****************/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    line-height: 70px;
}
#page-top a {
    text-decoration: none;
    color: #fff;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
}
#page-top a:hover {
    text-decoration: none;
}


/****************
     side-ber
*****************/
#main-content {
	width:70%;
	box-sizing: border-box;
	background: #ff0;
	padding: 30% 0;
}

#side-ber {
	width:25%;
	box-sizing: border-box;
	background: #0ff;
	padding: 30% 0;
}

/*20230417 add*/
#tubu .buttom-3 {
	display: block;margin: 0.6em auto 0;
	font-family: "Sawarabi Mincho";
}
header nav li.drop_menu li a{color:#000;}
@media (max-width: 480px) {
.menu-section.on {background: rgba(0, 0, 0, 0.85);}.drop_menu_sp ul {background:rgba(255,255,255,0.8);}.mnav ul .drop_menu_sp ul a{color:#000;}
.carousel_prev,.carousel_next{top: 0;width: 50%;height:67%;}
.carousel2_prev,.carousel2_next{top: 0;width: 50%;height:86%;}
.carousel_next, .carousel2_next {background-position: right center;}
.carousel_prev, .carousel2_prev {background-position: left center;}
#tubu .buttom-3 {width: 11em;}
}



/*20230425*/

.mnav{
	font-family: 'FelixTitlingMTStd', 'Hannari_web', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}


/* 202402追加
*******************************************************************/

.tubu_box{
	display: flex;
	flex-wrap: wrap;
	max-width: 350px;
}
.tubu_box p{
	width: calc(50% - 10px);
	padding: 5px;
}

@media screen and (max-width: 480px) {
	.tubu_box{
	max-width: 400px;
	margin: 0 auto;
	justify-content: center;
	}
	.tubu_box p {
		width: calc(32% - 10px);
		padding: 5px;
	}
	.tubu_box .sp_none {
		display: none !important;
	}
}

.unme_box01 {
    overflow: hidden;
    width: 1080px;
    margin: 25px auto 54px;
	display: flex;
	justify-content: space-between;
}

.unme_box01 a {
    width: 22%;
    margin: 0 30px;
    padding: 5px 10px;
}
.unme_box01 a {
    display: block;
    height: 30px;
    margin-bottom: 5px;
    padding: 5px 0;
    color: #fff;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    background-color: #ab7942;
}

.unme_box01 a:hover {
    opacity: 0.6;
}
		
@media screen and (max-width: 480px) {
	.unme_box01 {
	width: 100%;
	margin: 25px auto 54px;
	flex-wrap: wrap;
	}
	.unme_box01 a {
		width: 100%;
		margin: 0 0 5px 0;
		padding: 5px 0;
	}
}

