@charset "utf-8";
/* ここからreset.css */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/*「無難」なフォント指定*/  
body{
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

body p{
	line-height: 1.8em;
	font-size: 18px;
}
/*マウスカーソルで選択したテキストの色や背景色を変える*/ 
::selection {
  background-color: #ffeeb3;
}

/*Chromeでは縮小画像がぼやけて表示されるのを防ぐ*/  
body img {
    image-rendering: -webkit-optimize-contrast;
}

body a {
    color: #e9473f;
    text-decoration: underline;
}
body h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	  font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-weight: bold;
	/*text-shadow:0 0 black;*/ 
}
.icon_black{
background-color:black;color: #fff;padding:0 0.6em; border-radius: 1em;margin-right: 1em;display: inline-block;font-size: 0.75em;
}

.icon_red{
background-color:#e9473f;color: #fff;padding:0 0.6em; border-radius: 1em;margin-right: 1em;display: inline-block;font-size: 0.75em;
}

/*ロゴのフェードイン*/
.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
}
.logo_fadein p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

/*--------------タイトル--------------*/
.tit02{
  position: relative;
  padding:0 2rem 1.5rem;
  border-bottom: 3px solid #eee;
  border-left: 3px solid #eee;
  border-radius: 0 0 0 30px;
font-size: calc(1.425rem + 2.1vw);
	line-height: 1.4em;
}

.tit02:before {
  position: absolute;
  right: 200px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
}

.tit02:after {
  position: absolute;
  right: 204px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.tit03 {
	color: #fddc68;
	font-weight: bold;
	display: block;
	font-size: 0.6em;
	text-shadow: none;
	margin:0 ;
}
@media (max-width: 767.98px) {
.tit02{font-size: calc(1.3rem + 1.3vw);
	    padding:0 0 1.5rem 1.5rem;
}
}
.tit04{
	background-color: #777;
	color: #fff;
	padding: 0.5em 1em;
	border-radius:10px;
	font-weight: bold;
	margin-bottom: 1em;
	    display:block;
}

.tit05{
	border-bottom: 1px dotted #000;
	font-weight: bold;
	font-size: 1.5em;
	display: block;
	margin-bottom: 0.5em;
}

/*--------------ボタン色--------------*/
body .btn{font-weight: bold;}
/* 通常のボタン色 */
body  .btn-red01,
body  .btn-red01.disabled, body  .btn-red01:disabled {
  color: #fff;
  background-color: #e9473f;
  border-color: #e9473f;
}

/* focusされた時の枠線の色 */
body  .btn-red01:focus, body  .btn-red01.focus,
body  .btn-red01:not(:disabled):not(.disabled):active:focus, body  .btn-red01:not(:disabled):not(.disabled).active:focus,
.show > body  .btn-red01.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(233, 71, 63, 0.37);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
body  .btn-red01:hover {
  color: #fff;
  background-color: #d43a32;
  border-color: #e9473f;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
body  .btn-red01:not(:disabled):not(.disabled):active, body  .btn-red01:not(:disabled):not(.disabled).active,
.show > body  .btn-red01.dropdown-toggle {
  color: #fff;
  background-color: #d43a32;
  border-color: #e9473f;
}


/*--------------header--------------*/
header{
		font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-shadow: 0 0 #ccc;
}

header .container-xxl{
	position: relative;
}

header .container-xxl .nav-shop{
  position:absolute;
  top:0;right:0;
  background-color: #fff;
  border-radius:0 0 2px 2px;
 padding:0;
 display: inline-block;
 font-weight: bold;
 color: #000;
	font-size: 0.9em;
}

header .nav-shop:hover{
  opacity: 0.8 ;
}

.nav-shop button{
	background-color: #fddc68;
	border: none;
	color: #000;
	padding: 0.3em 1em;
}

header .nav li{
	text-align: center;
	font-size: 18px;
	
}

header .nav li a:hover{
	background-color:#fff3c9;	
}

#side-SNS{
	position: fixed;
	right:0;
	bottom:100px;
}

#side-SNS ul{
	list-style: none;
}
#side-SNS ul li a{
	padding: 8px;
	color: #fff;
	background-color: #4cc746;
	font-size: 30px;
	border-radius:6px 0 0 6px ;
}
#side-SNS ul li a .line-txt{
	display:none;
	font-size: 16px;
}
#side-SNS ul li a:hover .line-txt{
	display: inline-block;
	vertical-align: 5px;
	padding-left: 5px;
	animation-name: fade-in;
    animation-duration: .5s;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#dropdownKit:hover .dropdown-menu{
		display: block;
		margin: 0;
}
#dropdownKit .dropdown-menu{
		display: none;
		margin:0;
}
#dropdownKit img{
	width: 100px;
}
#dropdownKit .dropdown-item.active,#dropdownKit .dropdown-item:active {
    color: #6c757d;
    text-decoration: none;
    background-color: #fff3c9;
}

@media (max-width: 767.98px) {
header .nav li{
	font-size: 12px;
	
}
body .nav-link{
		    padding: 0.5rem;
	}
#dropdownKit img{
	width: 50px;
}
header .container-xxl .nav-shop{
  font-size: 13px;
}
}


/*--------------パンくずリスト--------------*/
/* 仕切りが > のパンくずリスト用 */
.breadcrumb-chevron {
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
  display: flex;
  gap: inherit;
  align-items: center;
  padding-left: 0;
  line-height: 1;
	    font-size: 0.7em;
}
.breadcrumb-chevron .breadcrumb-item::before {
  gap: inherit;
  float: none;
  width: 1rem;
  height: 1rem;
}

/* form */
body .btn-logo-color01 {
    color: #fff;
    background-color: #e9473f;
    border-color: #e9473f;
}

body .btn-logo-color01:hover {
	color: #fff;
    background-color: #c5352e;
    border-color: #c5352e;
}
body .form-check-input:checked {
    background-color: #e9473f;
    border-color: #e9473f;
}
body .form-check-input:focus {
    border-color: #e9473f5e;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(233,71,63,.37);
}
body .form-control:focus {
    color: #e9473f;
    background-color: #fff;
    border-color: #e9473f5e;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(233,71,63,.37);
}

/* footer */
#footer-outer{
	background-color:#ede9d8;
}

footer .nav{
	display: block;
}
footer .nav a {
	text-decoration:none;
	color: #000;
}
footer .nav a:hover {
	text-decoration:underline;
	color:#e9473f;
}

/*--------------
index
--------------*/
/*videoタグ*/  
.video-box .video{
width: 100%;
}

a.btn_top {
	text-decoration: none;
	color: #000;
	background-color: #fff;
	border-radius: 1em;
	border: 1px solid #ccc;
	margin:0;
	text-align: center;
}
a:hover.btn_top {
	text-decoration: none;
	color: #e9473f;
	opacity: 0.8;
}


.btn_top .tit01{
	font-weight: bold;
	font-size: 20px;
	line-height: 1.5em;
	margin: 0;
	
}
.btn_top img{
	max-width: 170px;
	margin: 0 auto;
}	

@media (max-width: 767.98px) {

}
.box01{
	border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: #ede9d8;
    text-align: center;
    border: 8px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;}

.box01 p{font-weight: bold;line-height: 1.8em;
text-shadow: none;}

/*flow*/

/*--------------
info
--------------*/
#info-box{padding: 0;}
#info-box-in li,#info-box li{
	list-style: none;
}

.info01 .yyyymmdd:after{
	background-color:#ff5722;
	content:"お知らせ";
  color: #fff;font-size: 0.6em;padding: 0.3em 1em;margin: 0 1em;border-radius: 1em;vertical-align:0.3em;}

.info02 .yyyymmdd:after{
	background-color:#e91e63;
	content:"新商品";
  color: #fff;font-size: 0.6em;padding: 0.3em 1em;margin: 0 1em;border-radius: 1em;vertical-align:0.3em;}

.info03 .yyyymmdd:after{
	background-color:#2196f3;
	content:"案内募集";
  color: #fff;font-size: 0.6em;padding: 0.3em 1em;margin: 0 1em;border-radius: 1em;vertical-align:0.3em;}

.info04 .yyyymmdd:after{
	background-color:#4caf50;
	content:"講座";
  color: #fff;font-size: 0.6em;padding: 0.3em 1em;margin: 0 1em;border-radius: 1em;vertical-align:0.3em;}

.info05 .yyyymmdd:after{
	background-color:#9c27b0;
	content:"リリース";
  color: #fff;font-size: 0.6em;padding: 0.3em 1em;margin: 0 1em;border-radius: 1em;vertical-align:0.3em;}

/*ニュースソート部分のトップ*/
.news_link {
	display: flex;
	margin: 0 0 35px;
	padding: 0;
	list-style-type: none;
}
.news_link li {
	width: 24.7%;
	margin-left: 2px;
	color: #fff;
	position: relative;
	padding: 20px 6px 20px;
	cursor: pointer;
	text-align: center;
	line-height: 1;
}

.news_link li.active, .news_link li:hover {
	color: #fff;
	font-weight: bold;}

.news_link li.li-info00{background: #000;}
.news_link li.li-info00.active, .news_link li.li-info00:hover {background: #fddc68;color: #555;}
.news_link li.li-info00:after{border-top: 16px solid #fddc68;}

.news_link li.li-info01{background: #000;}
.news_link li.li-info01.active, .news_link li.li-info01:hover {background: #ff5722;color: #FFF;}
.news_link li.li-info01:after{border-top: 16px solid #ff5722;}

.news_link li.li-info02{background: #000;}
.news_link li.li-info02.active, .news_link li.li-info02:hover {background: #e91e63;color: #FFF;}
.news_link li.li-info02:after{border-top: 16px solid #e91e63;}

.news_link li.li-info03{background: #000;}
.news_link li.li-info03.active, .news_link li.li-info03:hover {background: #2196f3;color: #FFF;}
.news_link li.li-info03:after{border-top: 16px solid #2196f3;}

.news_link li.li-info04{background: #000;}
.news_link li.li-info04.active, .news_link li.li-info04:hover {background: #4caf50;color: #FFF;}
.news_link li.li-info04:after{border-top: 16px solid #4caf50;}

.news_link li.li-info05{background: #000;}
.news_link li.li-info05.active, .news_link li.li-info05:hover {background: #9c27b0;color: #FFF;}
.news_link li.li-info05:after{border-top: 16px solid #9c27b0;}



.news_link li:first-child {
	margin-left: 0;
}
.news_link li:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid #c3d4dc;
	display: none;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
}

.news_link li.active:after, .news_link li:hover:after {
	display: block;
}
/*--------------
kouza
--------------*/
.box02 {
	color: #000;
	background-color: #fff;
	border-radius: 1em;
	border: 1px solid #ccc;
	margin:0;
	height: 100%;
}

.box04 {
    border-radius: 5px;
    border: 1px solid #000;
    padding:3em 1.5em 1.5em;
}
.news_area {
margin: 20px 0 60px;
	}	
.news_area dl{
	border-bottom: dotted 1px #CCCBCB;
	padding: 10px 0;
	}
	
.news_area dt{
	display: inline-block;
	vertical-align: top;
	width: 20%;
	text-align: center;
	background: #fddc68;
	padding: 4px 0;
	font-weight: bold;
}
.news_area dd{
	display: inline-block;
	vertical-align: top;
	width: 75%;
	padding: 4px 0 0 16px;
}
	
/*.news_area dd p { 
	font-weight: bold;
	}*/
.news_area dd span {
	font-weight: normal;
	}
/*QA*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt {
	position: relative;
	margin: 0 0 1.5em 0;
}
.cp_qa dd {
	position: relative;
	margin: 0 0 2em 0;
	padding: 0 0 1.5em 35px;
	border-bottom: 1px dotted #000;
}
.cp_qa dt::before/*, .cp_qa dd::before */{
	font-size: 35px;
	margin: 0 0.5em 0 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.2em;
}
.cp_qa dt::before {
	padding: 2px 10px;
	content: 'Q';
	background: #000;
	color: #fddc68;
}
/*.cp_qa dd::before {
	padding: 0 12px;
	content: 'A';
	background: #000;
}
*/
.cp_qa dt::after/*, .cp_qa dd::after*/ {
	position: absolute;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 5px 0 5px 5px;
	border-style: solid;
}
.cp_qa dt::after {
	left: 45px;
    top: 18px;
	border-color: transparent transparent transparent #000;
}

/*細々した設定*/
.font09{
	font-size: 0.9em;
}

.txt-sanka{
	font-weight: bold;
	bottom: 3em;
	color: #e1074d;
}
.btn01 {
  color: #fff;
    background-color: #d5201b;
    border-color: #d5201b;
    padding: 0.5em 1.5em;
    font-weight: bold;
    font-size: 1.2em;
}
.btn01:hover,.btn01:focus{color:#fff;background-color:#d5201b;border-color:#d5201b;box-shadow:0 0 0 .25rem rgba(237,197,206,.5)}

.btn01 a{color: #fff;text-decoration: none;}


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

.txt02 {
	font-family: 'Dancing Script', cursive;
  font-weight: 400;}


.txt03 {font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", 
"ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

.txt04{font-family: 'Leckerli One', cursive;
}

.color01{color: #ede9d8;}
.color02{color: #fddc68;}
.color03{color: #e9473f;}
.color04{color: #fff3c9;}
.color05{color: #f7bbb8;}
.color06{color: #2196f3;}
.color07{color: #fbf300;}

.bg01 {
    background-color: #fddc68;
}

.icon01{background-color: #000;
  color: #fff;font-size: 0.6em;padding: 0.1em 0.5em;margin: 0 0.5em;vertical-align: 0.3em;}




.tra-10{
transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.opa08{opacity:0.8;}

a.opa06 img:hover{opacity:0.6;}



/* ページTOPに戻る */
.pagetop{
    position: fixed;
    right: 15px;
    bottom: 5px;
}
.pagetop a{
    display: block;
    text-align: center;
    color: #727171;
	line-height: 1.2em;
    font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.pagetop a:hover{
	color:#e9473f;
}
.pagetop a i{
    font-size: 20px;
}