@charset "utf-8";

body#chara::before{
background: auto;
position: static;
width: 0;
height: 0;
}

/*-- 上下赤ライン --*/
#main_banner.line01, #banner_area.line01, #top-search.line01{
border-top: solid 3px rgba(172,6,9,1.00);
border-bottom: solid 3px rgba(172,6,9,1.00);
}

/*-- 設置店検索非表示 --*/
#search_pc{display: none!important;}

/*-- 背景色（虹グラデーション） --*/
.bg_rainbow {
	background-color:rgba(255,247,220,1.00);
    background: linear-gradient(135deg, #DAE1FF 0%, #D7FFFD 10%, #E5FFD7 20%, #FFEFD7 30%, #FFCAF4 40%, #DAE1FF 50%, #D7FFFD 60%, #E5FFD7 70%, #FFEFD7 80%, #FFCAF4 100%);
	-webkit-background: linear-gradient(135deg, #DAE1FF 0%, #D7FFFD 10%, #E5FFD7 20%, #FFEFD7 30%, #FFCAF4 40%, #DAE1FF 50%, #D7FFFD 60%, #E5FFD7 70%, #FFEFD7 80%, #FFCAF4 100%);/*chrome&safari*/
    -moz-background: linear-gradient(135deg, #DAE1FF 0%, #D7FFFD 10%, #E5FFD7 20%, #FFEFD7 30%, #FFCAF4 40%, #DAE1FF 50%, #D7FFFD 60%, #E5FFD7 70%, #FFEFD7 80%, #FFCAF4 100%);/*firefox*/
    -ms-background: linear-gradient(135deg, #DAE1FF 0%, #D7FFFD 10%, #E5FFD7 20%, #FFEFD7 30%, #FFCAF4 40%, #DAE1FF 50%, #D7FFFD 60%, #E5FFD7 70%, #FFEFD7 80%, #FFCAF4 100%);/*ie*/
}

/*
================================================================================================================
背景
================================================================================================================
*/
#bg_area {
width: 100%;
height: 100%;
	position: fixed;
	background-attachment: fixed;
background-color: rgba(67,5,94,1.00);
z-index: -1;
}
#box_bg01 {
width: 100%;
height: 100%;
	position:absolute;
/*background:url("../img/bg/");*/
background-color: rgba(0,20,40,0.00);
background-size: 640px;
background-repeat: repeat;
background-position: center top;
}

.hiden-title {width: 100%; max-width: 980px; margin: 0px auto;}
.hiden-title img{width: 100%;}
/*
================================================================================================================
メインバナー
================================================================================================================
*/
#main_box{
width: 100%;
height: auto;
/*min-height: 480px;*/
/*max-height:640px;*/
margin: 0;
padding: 0;
background-color: rgba(0,0,0,0.00);
}
/*-- 巻物エリア --*/
.scroll-area{
width: 98%;
max-width: 920px;
height:100%;
	min-height: 100px;
	margin: 0px auto 10px auto;
	background-color: rgba(255,255,255,0.00);
}

.scroll-box{width: 100%; margin: 20px 0; padding: 0;}

/*-- 巻物枠 --*/
.roll-waku{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}
.roll-waku .roll01,.roll-waku .roll03{width: 3%;}
.roll-waku .roll02{width: 94%; margin: 0; padding: 0; background-image: url("../img/00_hiden/roll_loop.png"); background-repeat: repeat-x; background-size: contain;}
.roll01 img, .roll02 img, .roll03 img{width: 100%;}

/*-- 巻物アニメーション --*/
.roll-anim{width:100%; max-height: 0; overflow: hidden; transition: 0.5s;}

/*-- 巻物内容 --*/
.roll-contents-bg{
	width: calc(94% - 6px);
	/*min-height: 240px;*/
	margin: 0 auto;
	padding: 3%;
	background-color: rgba(255,255,255,1.00);
	background-image: 
		url("../img/00_hiden/scroll_tl.png"), 
		url("../img/00_hiden/scroll_tr.png"), 
		url("../img/00_hiden/scroll_bl.png"), 
		url("../img/00_hiden/scroll_br.png"),
		url("../img/00_hiden/scroll_top.png"),
		url("../img/00_hiden/scroll_bottom.png"),
		url("../img/00_hiden/scroll_left.png"),
		url("../img/00_hiden/scroll_right.png");
	background-size: 10%;
	background-position: top left, top right, bottom left, bottom right, top, bottom, left, right;
	 background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
}
.roll-contents{
	width:100%;
	padding: 5px;
	margin: 0 auto;
	background-color: rgba(249,228,166,0.00);
	overflow: hidden;
}

@media screen and (max-width:800px) {
#main_box{
width: 100%;
height:auto;
margin: 0;
padding: 0;
background-color:rgba(0, 20, 40, 0.00)!important;
}
.scroll-area{
width:calc(100% - 10px);
	min-width: 320px;
height:100%;
	min-height: 60px;
	margin: 5px auto 5px auto;
	background-color: rgba(255,255,255,0.00);
}
.scroll-box{width: 100%; margin: 10px 0; padding: 0; overflow: hidden;}
.roll-contents-bg{width: calc(94% - 3px); background-size: 16%; padding: 5%; overflow: hidden;}
}


/*
================================================================================================================
　フェードインブラー
================================================================================================================
*/
.fade_blur {
    /* 変化させたいプロパティと時間を指定 */
	-webkit-transition: all 1.0s;/*chrome&safari*/
    -moz-transition: all 1.0s;/*firefox*/
    -ms-transition: all 1.0s;/*ie*/
    transition: all 1.0s;
    filter: blur(10px); /* 初期値 */
}
.fade_blur.is-blurred {
    filter: blur(0px); /* 最終値 */
}

.bg_blur {
    /* 変化させたいプロパティと時間を指定 */
	-webkit-transition: all 1.0s;/*chrome&safari*/
    -moz-transition: all 1.0s;/*firefox*/
    -ms-transition: all 1.0s;/*ie*/
    transition: all 1.0s;
    filter: blur(0px); /* 初期値 */
}
.bg_blur.is-blurred {
    filter: blur(6px); /* 最終値 */
}

.blur{
	-webkit-transition: all 1.0s;/*chrome&safari*/
    -moz-transition: all 1.0s;/*firefox*/
    -ms-transition: all 1.0s;/*ie*/
    transition: all 1.0s;
    filter: blur(6px);
    &.scrollin{
      filter: blur(0);
    }
}

/*--パララックス背景--*/
.cd-fixed-bg  {
    height: auto;
    /*max-height:600px;*/
    background-image: url(../img/bg/00_top_bg01.jpg);
    background-attachment: fixed!important;
    background-size: 640px;
    background-position: top center;
    background-repeat: repeat;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    -webkit-animation: kira 20s linear infinite;/*chrome&safari*/
    -moz-animation: kira 20s linear infinite;/*firefox*/
    -ms-animation: kira 20s linear infinite;/*ie*/
    animation: kira 20s linear infinite;
	}
/*バックグラウンド★アニメーション*/
@keyframes kira {
 0% {background-position: 0 0;}
 100% {background-position: 0px -640px;}
	}
/*chrome&safari*/
@-webkit-keyframes kira {
 0% {background-position: 0 0;}
 100% {background-position: 0px -640px;}
	}
/*firefox*/
@-moz-keyframes kira {
 0% {background-position: 0 0;}
 100% {background-position: 0px -640px;}
	}
/*ie*/
@-ms-keyframes kira {
 0% {background-position: 0 0;}
 100% {background-position: 0px -640px;}
	}


/*
================================================================================================================
　スクロール内レイアウト
================================================================================================================
*/
.roll-title {
	width:calc(100% - 0px);
color: #5a9a9c;
	font-size: 4vw;
	line-height: 4vw;
	font-weight: 600;
  text-align: center;
	margin: 0px;
  padding: 1.5vw 0 0.5vw 0;
	vertical-align: middle;
  border-top: solid 1px #5a9a9c;
  border-bottom: solid 1px #5a9a9c;
  background: -webkit-repeating-linear-gradient(-45deg, #e5f5f5, #e5f5f5 3px,#FFFFFF 3px, #FFFFFF 7px);
  background: repeating-linear-gradient(-45deg, #e5f5f5, #e5f5f5 3px,#FFFFFF 3px, #FFFFFF 7px);
}
@media screen and (min-width:800px) {
	.roll-title {font-size: 30px;line-height: 30px; padding: 8px 0 2px 0;}
}

.roll-explain{
	width:calc(100% - 0px);
color: #6C534B;
	text-align: left;
	font-size: 1.8vw;
	line-height: 2.8vw;
	font-weight:300;
  text-align:left;
	margin: 0px;
  padding: 1.5vw 0.5vw 0.5vw 0.5vw;
	vertical-align: middle;
}
.roll-explain strong {width:100%;  font-size: 2.2vw; line-height: 2.6vw; font-weight: bold;}
@media screen and (min-width:801px) {
	.roll-explain {font-size: 14px;line-height: 18px; padding: 8px 2px 2px 2px;}
	.roll-explain strong {font-size: 16px;line-height: 20px; padding: 8px 0 2px 0;}
	.roll-explain span {font-size: 14px;line-height: 18px; padding: 8px 0 2px 0; font-weight: bold;}
}
@media screen and (min-width:641px)  and (max-width:800px) {
	.roll-explain {font-size: 2.2vw;line-height: 2.8vw; padding: 8px 2px 2px 2px;}
	.roll-explain strong {font-size: 16px;line-height: 20px; padding: 8px 0 2px 0;}
	.roll-explain span {font-size: 1.8vw;line-height: 2.2vw; padding: 8px 0 2px 0; font-weight: bold;}
}
@media screen and (max-width:640px) {
	.roll-explain {font-size: 2.2vw;line-height: 2.8vw; padding: 5px 0px 5px 0px;}
	.roll-explain strong {font-size: 14px;line-height: 18px; padding: 5px 0 0px 0;}
	.roll-explain span {font-size: 2.8vw;line-height: 3.0vw; padding: 5px 0 5px 0; font-weight: bold;}
}
.roll-explain .box1{
	width:calc(100% - 10px);
	margin: 5px auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.roll-explain .box2{
	width:calc(49% - 10px);
	margin: 5px auto;
}
.roll-explain .box2.small{
	width:calc(36% - 10px);
}
.roll-explain .box2.big{
	width:calc(62% - 5px);
}
.roll-explain .box2.small2{
	width:calc(38% - 5px);
}
.roll-explain .box2.big2{
	width:calc(60% - 5px);
}
.roll-explain .box2.big3{
	width:calc(82% - 5px);
}
.roll-explain .box3{
	width:calc(33% - 10px);
	margin: 5px;
}
.roll-explain .box4{
	width:calc(24% - 10px);
	margin: 5px auto;
}
.roll-point{
	width:calc(98% - 0px);
	margin: 5px auto;
	padding:8px 10px 5px 10px;
	background-color: rgba(255,250,192,1.00);
	border-radius: 8px;
	outline:1px solid #aaa;
}
.roll-point01{
	width:calc(98% - 0px);
	margin: 5px auto;
	padding:8px 10px 5px 10px;
	background-color: rgba(255,210,210,1.00);
	border-radius: 8px;
	outline:1px solid #aaa;
}

@media screen and (min-width:641px) and (max-width:800px) {
.roll-explain .box1{flex-wrap:wrap;}
.roll-explain .box2{
	width:calc(49% - 10px);
	margin: 5px auto;
}
.roll-explain .box2.small, .roll-explain .box2.small2{
	width:calc(100% - 10px);
}
.roll-explain .box2.big, .roll-explain .box2.big2, .roll-explain .box2.big3{
	width:calc(100% - 10px);
}
.roll-explain .box3{
	width:calc(49% - 10px);
	margin: 5px;
}
.roll-explain .box4{
	width:calc(49% - 10px);
	margin: 5px auto;
}
}

@media screen and (max-width:640px) {
.roll-explain .box1{flex-wrap:wrap;}
.roll-explain .box2{
	width:calc(100% - 10px);
	margin: 5px auto;
}
.roll-explain .box2.small, .roll-explain .box2.small2{
	width:calc(100% - 10px);
}
.roll-explain .box2.big, .roll-explain .box2.big2, .roll-explain .box2.big3{
	width:calc(100% - 10px);
}
.roll-explain .box3{
	width:calc(100% - 10px);
	margin: 5px;
}
.roll-explain .box4{
	width:calc(100% - 10px);
	margin: 5px auto;
}
}
.responsive-table{
	width:calc(100% - 0px);
	margin: 0px auto;
}

/*
================================================================================================================
　スクロール内　表
================================================================================================================
*/
table.table01 {
  border-collapse: collapse;
  width: 100%;
  margin: 0px auto;
}
/*-- 表01 --*/
.table01 th, .table01 td {
  border: 1px solid #aaa;
  padding: 6px 8px;
  text-align: left;
}
.table01 thead th {
  background-color: #E1F0FF;
}
.table01 tbody th {
  background-color: #f5f5f5;
}
.table01 tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.table01 tfoot th {
  background-color: #FBFDDB;
}
.table01 .responsive-table {
  overflow-x: auto;
  width: 100%;
  margin: 5px auto;
}
.table01 .responsive-table table {
  min-width: 120px; /* 表全体の最小幅 */
}
.table01 .responsive-table img {
  width: 100%;
  margin: 0;
	padding: 0;
  min-width: 120px; /* 表全体の最小幅 */
}

.table_img_flex {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
@media screen and (max-width:800px) {.table_img_flex {display: flex; flex-wrap: wrap; justify-content: flex-start;}}
@media screen and (max-width:640px) {.table_img_flex {display: flex; flex-wrap: wrap; justify-content: space-between;}}

.table_img_flex03 {display: flex; flex-wrap:wrap; justify-content: center; align-items: flex-start; justify-content: flex-start;}
@media screen and (max-width:800px) {.table_img_flex03 {display: flex; flex-wrap: wrap; justify-content: flex-start;}}
@media screen and (max-width:640px) {.table_img_flex03 {display: flex; flex-wrap: wrap; justify-content: flex-start;}}

.table_img_flex04 {display: flex; flex-wrap:nowrap; justify-content: center; align-items: flex-start;}
@media screen and (max-width:800px) {.table_img_flex04 {display: flex; flex-wrap: wrap; justify-content: center;}}
@media screen and (max-width:640px) {.table_img_flex04 {display: flex; flex-wrap: wrap; justify-content: center;}}
.table_img_2 tfoot th, .table_img_3 tfoot th, .table_img_3-1 tfoot th, .table_img_4 tfoot th, .table_img_5 tfoot th {
  background-color: #FFFFFF!important;
  border: 1px solid #FFFFFF!important;
  color: #6C534B!important;
  padding: 6px 2px;
}

/*-- 表 画像入り（2列） --*/
table.table_img_2 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;}
.table_img_2 thead th, .table_img_2 tbody td {
  border: 1px solid #aaa;
  text-align: center;
}

.table_img_2 thead th{ padding: 6px 2px; background-color: #363636; color: #FFF;}
.table_img_2 tbody td{ padding: 0; margin:0; line-height:0;}

.table_img_2 th{text-align: center; font-size: 1.4vw;}
@media screen and (min-width:980px) {.table_img_2 th {font-size: 14px;line-height: 16px;}}
@media screen and (min-width:641px) and (max-width:979px) {.table_img_2 th {font-size: 1.6vw;line-height: 1.8vw;}}
@media screen and (max-width:800px) { table.table_img_2 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }
@media screen and (max-width:640px) {.table_img_2 th {font-size: 2.2vw;line-height: 2.4vw;} table.table_img_2 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }

/*-- 表 画像入り（3列） --*/
table.table_img_3 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;}
.table_img_3 thead th, .table_img_3 tbody td {
  border: 1px solid #aaa;
  text-align: center;
}

.table_img_3 thead th{ padding: 6px 2px; background-color: #363636; color: #FFF;}
.table_img_3 tbody td{ padding: 0; margin:0; line-height:0;}

.table_img_3 th{text-align: center; font-size: 1.4vw;}
@media screen and (min-width:801px) {.table_img_3 th {font-size: 14px;line-height: 16px; flex-wrap: wrap!important; justify-content: center!important;}}
@media screen and (min-width:641px) and (max-width:800px) {.table_img_3 th {font-size: 1.8vw;line-height: 2.0vw;}}
@media screen and (min-width:641px) and (max-width:800px) { table.table_img_3 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;}}
@media screen and (max-width:640px) {.table_img_3 th {font-size: 2.2vw;line-height: 2.4vw;} table.table_img_3 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }

/*-- 表 画像入り（3列 パターン1・白） --*/
table.table_img_3-1 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;}
.table_img_3-1 thead th, .table_img_3-1 tbody td {
  border: 1px solid #6C534B;
  text-align: center;
}

.table_img_3-1 {
  width:calc((100% - 30px) / 3);
	margin: 0 5px;
}

.table_img_3-1 thead th{ padding: 6px 2px; background-color: #F4EDEA; color: #6C534B;}
.table_img_3-1 tbody td{ padding: 0; margin:0; line-height:0;}

.table_img_3-1 th{text-align: center; font-size: 1.4vw;}
@media screen and (min-width:801px) {.table_img_3-1 th {font-size: 13px;line-height: 15px;}}
@media screen and (min-width:641px) and (max-width:800px) {.table_img_3-1 th {font-size: 1.2vw;line-height: 1.6vw;}}
@media screen and (min-width:641px) and (max-width:800px) { table.table_img_3-1 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;} }
@media screen and (max-width:640px) {.table_img_3-1 th {font-size: 1.2vw;line-height: 1.6vw;} table.table_img_3-1 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;}  }

/*-- 表 画像入り（4列） --*/
table.table_img_4 { border-collapse: collapse; width:calc((100% / 4) - 2px); margin: 1px;}
.table_img_4 th, .table_img_4 td {
  border: 1px solid #aaa;
  text-align: center;
}
.table_img_4 th{ padding: 6px 2px; background-color: #363636; color: #FFF;}
.table_img_4 td{ padding: 0; margin:0; line-height:0;}

.table_img_4 th{text-align: center; font-size: 1.4vw;}
@media screen and (min-width:801px) {.table_img_5 th {font-size: 12px;line-height: 20px;}}
@media screen and (min-width:641px) and (max-width:800px) {.table_img_4 th {font-size: 1.4vw;line-height: 1.6vw;}}
@media screen and (min-width:641px) and (max-width:800px) { table.table_img_4 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }
@media screen and (max-width:640px) {.table_img_4 th {font-size: 10px;line-height: 20px;} table.table_img_4 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }

/*-- 表 画像入り（5列） --*/
table.table_img_5 { border-collapse: collapse;  width:calc((100% / 5) - 2px); margin: 1px;}
.table_img_5 th, .table_img_5 td {
  border: 1px solid #aaa;
  text-align: center;
}
.table_img_5 th{ padding: 6px 2px; background-color: #363636; color: #FFF;}
.table_img_5 td{ padding: 0; margin:0; line-height:0;}

.table_img_5 th{text-align: center; font-size: 1.4vw;}
@media screen and (min-width:801px) {.table_img_5 th {font-size: 12px;line-height: 20px;}}
@media screen and (min-width:641px) and (max-width:800px) {.table_img_5 th {font-size: 1.4vw;line-height: 1.6vw;}}
@media screen and (min-width:641px) and (max-width:800px) { table.table_img_5 { border-collapse: collapse; width:calc((100% / 3) - 2px); margin: 1px;} }
@media screen and (max-width:640px) {.table_img_5 th {font-size: 10px;line-height: 20px;} table.table_img_5 { border-collapse: collapse; width:calc((100% / 2) - 2px); margin: 1px;} }


.font12{font-size: 12px; line-height: 14px;}
@media screen and (min-width:641px) and (max-width:800px) {.font12{font-size: 1.6vw;line-height: 2.2vw;}}
@media screen and (max-width:640px) {.font12{font-size: 2.2vw;line-height: 2.8vw;}}