@charset "utf-8";

/* =========================================================
top
========================================================= */
.news-box {
margin: 0 auto;
margin-top: 30px;
border: 3px solid #FF3867;
background: #FFFFE5;
}
.news-box .title {
padding: 7px 10px 10px 10px;
line-height: 1.2;
background: #FF3867;
font-size: 110%;
font-weight: bold;
color:  #fff;
text-align: center;
}
.news-box .title .icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 10px;
line-height: 20px;
text-align: center;
color: #FF3867;
background: #fff;
vertical-align: bottom;
}
.news-box .text {
/* padding: 10px; */
line-height: 1.2;
}
.news-box p {
      padding-top: 6px;
      padding-left: 2em;
      padding-right: 2em;
      margin-bottom: 0;
}
.news-box h2 {
      padding-top: 0;
      margin-top: 0;
}
#get_news {
padding: 10px;
}
#visual {
position: relative;
z-index: 2;
}
.visual > li {
background: #019fe8;
}
.visual > li.line {
background: url(../images/line_visual_bg01.png);
}
.visual > li.visual-new {
background: url(../images/top_visual_new_bg.jpg);
}
#visual .bx-wrapper .bx-pager,
#visual .bx-wrapper .bx-controls-auto {
bottom: -28px;
}
#visual  .bx-wrapper .bx-pager.bx-default-pager a {
background: #eee;
}
#visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#visual .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #999;
}
#visual .bx-wrapper .bx-controls-direction a {
position: absolute;
top: 0;
outline: 0;
width: 50%;
height: 100%;
text-indent: -9999px;
z-index: 0;
}
#visual .hinmoku-nav > * a span {
position: relative;
}
#visual .bx-wrapper .bx-controls-direction a {
top: 50%;
width: 100px;
height: 100px;
transform:translateY(-50%);
opacity: 0.3;
}
#visual .bx-wrapper .bx-controls-direction a:before {
content: "";
position: absolute;
top: 50%;
right: 50%;
width: 30px;
height: 8px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
#visual .bx-wrapper .bx-controls-direction a:after {
content: "";
position: absolute;
top: 50%;
right: 50%;
width: 8px;
height: 30px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
#visual .bx-wrapper .bx-controls-direction a.bx-prev:before {
right: inherit;
left: 50%;
transform: rotate(-45deg);
transform-origin: left top;
}
#visual .bx-wrapper .bx-controls-direction a.bx-prev:after {
right: inherit;
left: 50%;
transform: rotate(-45deg);
transform-origin: left top;
}
.top_layout {
clear: both;
}
.top_layout > *:first-child {
padding-bottom: 50px;
}
.top_layout > *:last-child {
width: 270px;
padding-left: 20px;
padding-bottom: 50px;
}
.twitter_box {
margin-bottom: 10px;
/* margin-right: 30px; */
}
/*
#follow_btn {
margin-left: 50px;
}
*/
#timeline_box {
border: 1px solid #f0f0f0;
}
.ban_box .ban {
margin-bottom: 10px;
}
#ichioshi,
#mishiyou,
#chyuko {
background: #eee;
}
#ichioshi .box,
#mishiyou .box,
#chyuko .box {
padding: 20px;
margin-bottom: 20px;
overflow: hidden;
}
#ichioshi .box td img,
#mishiyou .box td img,
#chyuko .box td img {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

img.centered {
        width: inherit;
        display: block;
        margin-left: auto;
        margin-right: auto;
}

img.alignright {
        width: inherit;
        padding: 4px;
        //margin: 0 0 2px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
        display: inline;
        float: right;
}

img.alignleft {
        width: inherit;
        padding: 4px;
        //margin: 0 10px 2px 0;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
        display: inline;
        float: left;
}
img.aligncenter {
        width: inherit;
        padding: 4px;
	display: block; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
//        float: left;
}
/*
.ichioshi-list {
background: #eee;
}
.ichioshi-list:before { content:""; display:table;}
.ichioshi-list:after { content:""; display:table; clear:both;}
.ichioshi-list { zoom:1;}
.ichioshi-list > * {
float: left;
width: 33.33%;
padding: 10px;
line-height: 1.2;
}
.ichioshi-list > * > * {
display: block;
background: #fff;
box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
border-radius: 5px;
color: #111;
text-decoration: none;
text-align: center;
padding: 10px;
}
.ichioshi-list .photo {
padding: 0;
width: 100%;
height: 130px;
overflow: hidden;
max-width: 200px;
text-align: center;
margin: 0 auto;
}
.ichioshi-list .photo img {
width: inherit;
height: inherit;
object-fit: cover;
object-position: 50% 50%;
}
.ichioshi-list .text {
font-size: 90%;
padding-top: 10px;
text-align: left;
}
@media screen and (max-width: 900px) {
	.ichioshi-list > * {
	width: 50%;
	}
}
*/
@media screen and (max-width: 768px) {
	.top_layout > *:first-child {
	padding-bottom: 20px;
	}
	.top_layout > *:last-child {
	margin: 0 auto;
	padding-left: 0;
	padding-bottom: 20px;
	}

#visual .bx-wrapper .bx-controls-direction a {
    width: 50px;
    height: 50px;
}
}
@media screen and (max-width: 640px) {
	.news-box {
	margin-left: 10px;
	margin-right: 10px;
	}
	.ichioshi-list > * {
	width: 100%;
	}
	.ichioshi-list .photo {
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
	}
	.ichioshi-list > * img {
	width: inherit;
    height: inherit;
    object-fit: none;
    object-position: inherit;
	max-width: 200px;
	}
}
/* =========================================================
item
========================================================= */
.text-bar.type-hinmoku {
background-color: #39ACC4;
margin-bottom: 0;
}
.hinmoku-nav {
background: #eee;
margin-bottom: 30px;
padding: 10px;
}
.hinmoku-nav:before { content:""; display:table;}
.hinmoku-nav:after { content:""; display:table; clear:both;}
.hinmoku-nav { zoom:1;}
.hinmoku-nav ul > * {
float: left;
width: 20%;
padding: 10px;
line-height: 1.2;
}
.hinmoku-nav a {
display: block;
background: #fff;
box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
}
.hinmoku-nav a span {
position: relative;
display: block;
padding: 10px;
}
.hinmoku-nav a span:before {
position: absolute;
top: 50%;
right: 10px;
content: "";
width: 10px;
height: 3px;
background: #39acc4;
transform: rotate(45deg);
transform-origin: right top;
}
.hinmoku-nav a span:after {
position: absolute;
top: 50%;
right: 10px;
content: "";
width: 3px;
height: 10px;
background: #39acc4;
transform: rotate(45deg);
transform-origin: right top;
}
.hinmoku-nav a img {
max-width: 120px;
}
.hinmoku-nav a b {
padding: 5px;
width: 100%;
display: block;
font-size: 85%;
font-weight: normal;
background: #999;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #fff;
min-height: 42px;
}
.hinmoku-list {
}
.hinmoku-list ul {
}
.hinmoku-list li {
border: 2px solid #39acc4;
border-radius: 5px;
background: #fff;
margin-bottom: 20px;
}
.hinmoku-list .title {
background: #eee;
padding: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #39acc4;
font-size: 150%;
}
.hinmoku-list .title a {
color: #39acc4;
text-decoration: none;
}
.hinmoku-list .layout {
padding: 20px;
}
.hinmoku-list .photo {
max-width: 400px;
}
.hinmoku-list .info {
}
.hinmoku-list .info .text {
}
.hinmoku-list .info .text b {
display: block;
border-bottom: 1px solid #ddd;
}
.hinmoku-list .info .btn {
text-align: right;
padding: 10px 0 0 0;
}
.hinmoku-list .info .btn .text-btn {
background-color: #39acc4;
padding: 5px;
min-width: 120px;
display: inline-block;
}
.hinmoku-list .info .btn .text-btn:before,
.hinmoku-list .info .btn .text-btn:after {
display: none;
}
.hinmoku-box {
padding: 20px;
}
.hinmoku-detail {
border: 2px solid #39acc4;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: none;
background: #fff;
margin-bottom: 20px;
}
.hinmoku-detail .title {
background: #eee;
padding: 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #39acc4;
font-size: 150%;
}
.hinmoku-detail .title a {
color: #39acc4;
text-decoration: none;
}
.hinmoku-detail .layout {
padding: 20px;
}
.hinmoku-detail .layout > *:first-child {
width: 400px;
}
.hinmoku-detail .photo {
max-width: 400px;
}
.hinmoku-detail .info {
}
.hinmoku-detail .info .text {
}
.hinmoku-detail .info .text b {
display: block;
border-bottom: 1px solid #ddd;
}
.hinmoku-detail .info .btn {
text-align: right;
padding: 10px 0 0 0;
}
.hinmoku-detail .info .btn .text-btn {
background-color: #39acc4;
padding: 5px;
min-width: 120px;
display: inline-block;
}
.hinmoku-detail .info .btn .text-btn:before,
.hinmoku-detail .info .btn .text-btn:after {
display: none;
}

/* Q&A */
#qanda_wrapper {
        width: 68%;
        float: left;
}
#qanda_title {
        text-align: center;
        background-color: #65B403;
        color: white;
        font-size: 2em;
        text-shadow: 1px 2px 3px #202020;
        border-radius: 6px;
        margin-bottom: 16px;
}
.qanda {
        margin-bottom: 10px;
}
.qanda p {
        padding-left: 28px;
        text-indent: -28px;
}
.qanda .qanda_q, .qanda .qanda_a {
        display: inline-block;
        width: 28px;
        text-indent: 0;
        padding-left: 6px;
}
.qanda .question {
        color: #005295;
}
.qanda .qanda_a {
        //color: #F29C11;
        color: #FF7F00;
}
.qanda .answer {
        //background-color: #FFFCC4;
        background-color: #fff4d4;
        padding-bottom: 2px;
}
.qanda span {
        font-size: 1.4em;
        font-weight: bold;
}

/* Twitter タイムライン */
#item_twitter {
        width: 30%;
        float: right;
}

.clearfix {
        overflow: hidden;
}
.clearfix:after {
        content: "";
        display: block;
        clear: both;
}

/* 価格表 */
table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  width: 100%;
}
table th,
table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
}
table th {
  //background-color: #eee;
  text-align: left;
}

@media screen and (max-width: 900px) {
	.hinmoku-nav dl > * {
	width: 25%;
	}
	.hinmoku-nav ul > * {
	padding: 5px;
	}
}
@media screen and (max-width: 768px) {
	.hinmoku-nav ul > * {
	width: 33.33%;
	}
	.hinmoku-nav ul > * {
	padding: 10px;
	}
	.hinmoku-list .photo {
	width: 100%;
	max-width: inherit;
	text-align: center;
	}
	.hinmoku-list .photo img {
	max-width: 400px;
	}
	.hinmoku-detail {
	margin-top: 10px;
	}
	.hinmoku-detail .title {
	padding: 10px;
	border-top: 2px solid #39acc4;
	}
	.hinmoku-detail .photo {
	width: inherit!important;
	max-width: inherit;
	text-align: center;
	}
	.hinmoku-detail .photo img {
	max-width: 400px;
	}
	.hinmoku-detail .layout {
	padding: 10px;
	}
	.hinmoku-box {
	padding: 10px;
	}
}
@media screen and (max-width: 640px) {
	.hinmoku-nav ul > * {
	width: 50%;
	}
	.hinmoku-list .title {
	padding: 10px;
	}
        #qanda_wrapper {
        display: block;
        clear: left;
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        margin-bottom: 20px;
        }
        #item_twitter {
        display: block;
        clear: right;
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        margin-bottom: 20px;
        }

/* 価格表 */
  table {
    border: none;
  }
  table thead {
    display: none;
  }
  table tr {
    //border-top: 1px solid #999;
    display: block;
    //margin-bottom: 20px;
    margin-bottom: 10px;
  }
  table td {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    //border-bottom: 1px solid #999;
    border-bottom: none;
    display: block;
    padding: 10px;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  table td:last-child {
    border-bottom: 1px solid #999;
  }
}
@media screen and (max-width: 420px) {
	.hinmoku-nav ul > * {
	width: 100%;
	}
}
/* =========================================================
guide
========================================================= */
.guide-nav {
padding: 20px 0;
}
.guide-nav ul {
display: table;
width: 100%;
margin-bottom: 20px 0;
}
.guide-nav ul > * {
display: table-cell;
width: 33.33%;
padding: 3px;
}
.guide-nav ul > * img {
max-width: 320px;
}
.guide-nav li {
max-width: 900px;
margin: 0 auto;
}
.guide-nav.guide-top ul > * {
    display: block;
    width: inherit;
    padding: 0;
}
.guide-nav.guide-top ul > * img {
    max-width: 100%;
}
.guide-nav.guide-top li .tab-no.sp-no {
display: none;
}
.guide-nav.guide-top li .pc-no {
display: block;
}
.guide-flow {
}
.guide-flow ol {
}
.guide-flow li {
position: relative;
border: 2px solid #FFE1BD;
border-radius: 5px;
margin-bottom: 20px;
padding: 10px 220px 10px 10px;
min-height: 200px;
}
.guide-flow .title {
position: relative;
min-height: 70px;
border-bottom: 1px solid #FFE1BD;
margin-bottom: 20px;
}
.guide-flow .title img:first-child {
position: absolute;
width: 70px;
left: 0;
top: 0;
}
.guide-flow .title img:nth-child(2) {
max-width: 120px;
position: absolute;
left: 70px;
top: 0;
}
.guide-flow .title b {
font-size: 155%;
display: block;
padding: 35px 0 20px 70px;
line-height: 1.1;
}
.guide-flow .image {
position: absolute;
right: 20px;
top: 20px;
max-width: 190px;
}
.guide-flow .text {
padding: 5px 10px;
}
.guide-dlist {
}
.guide-dlist dl {
display: table;
width: 100%;
padding: 0 10px 10px 10px;
}
.guide-dlist dl > * {
display: table-cell;
vertical-align: middle;
}
.guide-dlist dl > dt {
width: 190px;
background: #FFAF4C;
color: #fff;
text-align: center;
border-radius: 5px;
font-weight: bold;
font-size: 115%;
line-height: 1.2;
padding: 20px 10px;
}
.guide-dlist dl > dd {
padding: 20px;
}
.guide-dlist .text-btn {
box-shadow: none;
background: #fff;
color: #ff7f00;
border: 2px solid #ff7f00;
font-size: 95%;
padding: 5px 30px 5px 10px;
min-width: inherit;
}
.guide-dlist .text-btn:before,
.guide-dlist .text-btn:after {
background: #ff7f00;
}
.guide-dlist-box {
background: #FFF4D4;
border: 1px solid #FFE1BD;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
.guide-dlist-box b {
color: #8C4600;
font-size: 120%;
display: inline;
margin-bottom: 10px;
}
.guide-menu {
padding-bottom: 30px;
}
.guide-menu li {
text-align: center;
}
.guide-menu img {
max-width: 900px;
}
@media screen and (max-width: 768px) {
	.guide-nav ul {
	display: block;
	margin-bottom: 0;
	}
	.guide-nav ul > * {
	display: block;
	width: auto;
	padding: 0;
	}
	.guide-nav ul > * img {
	max-width: 100%;
	}
	.guide-nav {
	padding: 20px 0;
	}
	.guide-flow li {
	padding: 10px;	
	}
	.guide-flow .title {
	margin-bottom: 0;
	}
	.guide-flow .image {
	width: 100%;
	position: relative;
	right: inherit;
	top: inherit;
	max-width: 190px;
	margin: 0 auto;
	text-align: center;
	}
	.guide-flow .tel-text-box {
	width: 100%;
	}
	.guide-flow .tel-box {
	text-align: center;
	width: 100%;
	}
	.guide-flow .tel-box > * {
	display: inline-block!important;
	}
	.guide-flow .tel-text-box .tel  {
	display: block!important;
	text-align: center;
	}
	.guide-dlist {
	}
	.guide-dlist dl {
	display: block;
	width: 100%;
	padding: 0;
	}
	.guide-dlist dl > * {
	display: block;
	}
	.guide-dlist dl > dt {
	width: auto;
	padding: 10px;
	}
	.guide-dlist dl > dd {
	padding: 10px 0;
	}
	.guide-dlist dl > dd .tel {
	font-size: 250%;
	}
	.guide-dlist dl > dd .text {
	padding: 5px;
	}
	.guide-dlist-box {
	margin: 0 0 10px 0;
	}
	}
@media screen and (max-width: 460px) {
	.guide-nav {
	padding: 10px 0 20px 0;
	}
	.guide-nav li {
	width: 100%;
	padding: 0 10px;
	text-align: center;
	}
	.guide-nav li img {
	max-width: 320px;
	margin: 0 auto;
	}
	.guide-nav .tab-no.sp-no {
	display: block;
	}
	.guide-nav .pc-no {
	display: none;
	}
	.guide-nav.guide-top li {
	text-align: center;
	padding: 0 10px;
	}
	.guide-nav.guide-top li img {
	max-width: 320px;
	}
	.guide-nav.guide-top li .tab-no.sp-no {
	display: block;
	}
	.guide-nav.guide-top li .pc-no {
	display: none;
	}
}
/* =========================================================
shop
========================================================= */
#shop01 .item:first-child {
padding-right: 20px;
width: 500px;
}
#shop01 img {
display: inline-block;
margin: 5px;
max-width: 200px;
}
#shop {
padding: 0 0 50px 0;
}
#shop .dlist-box {
margin-bottom: 20px;
}
#shop .dlist-box dl dt {
width: 120px;
}
#shop .guide-dlist dl {
padding: 0 0 20px 0;
}
#shop .guide-dlist dt {
width: 230px;
}
#shop .map {
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
	#shop01 .item:first-child {
	padding-right: 0;
	width: inherit;
	}
	#shop .guide-dlist dt {
	width: auto;
	}
	#shop .photo {
	text-align: center;
	}
}
/* =========================================================
area
========================================================= */
.area{
	width: 100%;
}
.area-box {
position: relative;
padding-bottom: 50px;
}
.area-box .title {
position: relative;
margin-bottom: 20px;
}
.area-box .title img {
max-width: 710px;
width: 80%;
}
.area-box .text {
position: relative;
font-size: 110%;
}
.area-box .text span,
.area-box .text b {
color: #ff7f00;
}
.area-box .image img {
position: absolute;
right: 0;
top: 0;
max-width: 390px;
width: 40%;
margin-top: 50px;
z-index: -1;
}
	@media screen and (max-width: 768px) {
	.area-box {
	padding: 0 10px;
	}
	.area-box .title img {
	width: 75%;
	}
	.area-box .image img {
	margin-top: 0;
	}
	}
	@media screen and (max-width: 420px) {
	.area-box .title {
	margin: 0;
	}
	.area-box .title img {
	width: 100%;
	}
	.area-box .image {
	text-align: center;
	}
	.area-box .image img {
	position: relative;
	right: none;
	top: inherit;
	max-width: 390px;
	width: 70%;
	margin-top: 0;
	}
	}
/* =========================================================
contact
========================================================= */
/*
.contact_btn {
margin-top: -20px;
margin-bottom: 20px;
background: #fff4d4;
}
.contact_btn ul {
display: table;
width: 80%;
margin: 0 auto;
}
.contact_btn li {
display: table-cell;
table-layout: fixed;
padding: 20px;
}
.contact_btn .btn {
display: table;
width: 100%;
height: 60px;
}
.contact_btn a {
position: relative;
display: table-cell;
text-align: center;
background: #65b403;
padding: 10px 30px 10px 10px;
color: #fff;
vertical-align: middle;
text-decoration: none;
border-radius: 5px;
font-size: 110%;
font-weight: bold;
box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
}
.contact_btn a:hover {
opacity: 0.7;
}
.contact_btn a:before {
position: absolute;
top: 50%;
right: 20px;
content: "";
width: 15px;
height: 4px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
.contact_btn a:after {
position: absolute;
top: 50%;
right: 20px;
content: "";
width: 4px;
height: 15px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
@media screen and (max-width: 768px) {
.contact_btn ul {
width: 100%;
}
.contact_btn li {
padding: 10px;
}
}
@media screen and (max-width: 640px) {
.contact_btn ul {
}
.contact_btn li {
display: block;
}
.contact_btn li:first-child {
padding-bottom: 0;
}
.contact_btn .btn {
height: 40px;
}
.contact_btn a {
padding: 5px 30px 5px 5px;
font-size: 100%;
}
}
*/

.select_div {
    margin-top: 10px;
}
.select_box {
	margin-top: 2px;
}
.contact-comp{
padding: 50px 0 60px 0;
}
.daisuu, .box_abc {
    display: inline-block;
    border: 1px solid #ddd;
    height: 2.6em;
    border-radius: 3px;
    text-align: right;
    margin-left: 2px;
}
#box_type {
	margin-bottom: 20px;
}
.box_abc {
	margin-top: 10px;
}
div.close {
	width: 160px;
	margin-top: 20px;
}
.plus_btn {
	background-color: #ff8000;
	color: white;
	font-size: 1.3em;
	padding: 0px 5px 3px 5px;
	margin-right: 4px;
	border-radius: 50%;
	vertical-align: middle;
}
.minus_btn {
	background-color: #808080;
	color: white;
	font-size: 1.0em;
	padding: 2px 6px 4px 6px;
    	margin-right: 4px;
    	border-radius: 50%;
    	vertical-align: bottom;
}
.add_item {
	font-size: 1.0em;
	color: white;
	background-color: #ff8000;
	border: solid 1px #ff8000;
	padding: 6px;
	border-radius: 8px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
.delete_item {
	color: #808080;
}

	@media screen and (max-width: 768px) {
	.form .W30p {
	width: 70%!important;
	}
	.form .W70p {
	width: 90%!important;
	}
	}
/* =========================================================
used
========================================================= */
#used {
max-width: 600px;
margin: 0 auto;
padding: 30px 0 50px 0;
}
#used dt {
width: 40%;
}
/* =========================================================
sitemap
========================================================= */
#sitemap {
margin: 0 auto;
padding: 30px 0 50px 0;
}
#sitemap dl {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
#sitemap dt {
padding: 10px 0;
}
#sitemap dd {
padding: 10px 0 10px 1em;
}
/* =========================================================
line
========================================================= */
.mainArea{
	padding-bottom: 0;
}

#line{
	width: 100%;

}

#line-visual {
background: url(../img/line_visual_bg01.png);
}
.line-text-title {
margin-bottom: 30px;
background: #00C300;
font-weight: normal;
text-align: center;
line-height: 1.2;
padding: 10px;
color: #fff;
font-size: 200%;
}
.line-text-title.type2 {
position: relative;
background: #333;
font-size: 120%;
padding: 5px;
margin-bottom: 40px;
}
.line-text-title.type2:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
margin-left: -5px;
color: #333;
width: 0;
height: 0;
border: 13px solid transparent;
border-top: 13px solid #333;
}
.line-layout-box {
clear: both;
width: 100%;
}
.line-layout-box:before { content:""; display:table;}
.line-layout-box:after { content:""; display:table; clear:both;}
.line-layout-box { zoom:1;}
.line-layout-box .item {
float: left;
width: 50%;
}
.line-layout-box .item {
float: left;
}
#line .add .item-in > .title {
font-size: 180%;
color: #FFAE4C;
font-weight: bold;
text-align: center;
line-height: 1.2;
margin-bottom: 10px;
}
#line .add .account {
margin-bottom: 10px;
background: #FFAE4C;
border-radius: 5px;
color: #fff;
padding: 20px;
}
#line .add .account .text {
text-align: center;
}
#line .add .account .id {
text-align: center;
font-size: 300%;
}
#line .add .qrcode {
background: #fff;
margin-bottom: 10px;
border-radius: 5px;
background: #fff;
}
#line .add .qrcode .title {
position: relative;
background: #FFAE4C;
border-radius: 5px 5px 0 0;
color: #fff;
padding: 5px 20px;
}
#line .add .qrcode .title:after {
content: "";
position: absolute;
left: 30px;
top: 100%;
color: #FFAE4C;
width: 0;
height: 0;
border-top: 10px solid #FFAE4C;
border-right: 7px solid transparent;
border-bottom: 10px solid transparent;
border-left: 7px solid transparent;
}
#line .add .qr-box {
width: 100%;
}
#line .add .qr-box:before { content:""; display:table;}
#line .add .qr-box:after { content:""; display:table; clear:both;}
#line .add .qr-box { zoom:1;}
#line .add .qrcode .text {
font-size: 85%;
float: right;
width: 100%;
}
#line .add .qrcode .text p {
padding: 20px 20px 20px 160px;
}
#line .add .qrcode .qr {
padding: 10px;
float: left;
width: 160px;
margin-right: -160px;
}
#line .add .qrcode .qr img {
max-width: 140px;
}
#line-preparation {
background: #FFF4D4;
padding: 30px 0;
}
#line-preparation .line-layout-box .item.add {
float: left;
width: 340px;
margin-right: -340px;
}
#line-preparation .line-layout-box .item.image {
width: 100%;
float: none;
float: right;
}
#line-preparation .line-layout-box .item.image .item-in {
margin-left: 370px;
text-align: right;
}
#line-preparation .line-layout-box .item.image .item-in img {
max-width: 610px;
}
#line-flow {
background: #fff;
padding: 30px 0;
}
#line-flow .line-layout-box .item.info {
float: none;
float: right;
width: 310px;
margin-left: -340px;
margin-right: 30px;
}
#line-flow .line-layout-box .item.image .item-in {
margin-right: 370px;
text-align: right;
}
#line-flow .line-layout-box .item.image {
width: 100%;
float: left;
}
#line-flow .line-layout-box .item.image .item-in img {
max-width: 610px;
}
#line-flow .info .title {
text-align: center;
}
#line-flow .info .title b {
background: #00C300;
color: #FFF;
display: inline-block;
border-radius: 20px;
margin-bottom: 10px;
padding: 5px 15px;
font-size: 120%;
line-height: 1.2;
}
#line-flow .info .time {
margin-bottom: 10px;
text-align: center;
font-size: 250%;
font-weight: bold;
color: #999;
}
#line-flow .info .text {
margin-bottom: 20px;
}
#line-flow .info .caution {
display: table;
font-size: 120%;
margin: 0 auto 20px auto;
}
#line-flow .info .caution b,
#line-flow .info .caution span {
display: table-cell;
vertical-align: middle;
}
#line-flow .info .caution b {
color: #fff;
background: #FFAF4C;
height: 70px;
width: 70px;
border-radius: 35px;
text-align: center;
}
#line-flow .info .caution span {
color: #FFAF4C;
font-weight: bold;
line-height: 1.2;
padding: 0 10px;
}
#line-flow2 {
padding: 30px 0;
}
#line-flow2 .area-in > .text {
text-align: center;
font-weight: bold;
margin-bottom: 20px;
font-size: 110%;
}
#line-flow2 .item .item-in {
border: 3px solid #eee;
}
#line-flow2 .item:first-child .item-in {
margin-right: 10px;
}
#line-flow2 .item:last-child .item-in {
margin-left: 10px;
}
#line-flow2 .item .title {
background: #FFAF4C;
text-align: center;
line-height: 1.2;
padding: 15px;
color: #fff;
font-size: 110%;
font-weight: bold;
}
#line-flow2 .line-layout-box {
margin-bottom: 20px;
}
#line-flow2 .item .image {
text-align: center;
padding: 20px;
}
#line-flow2 .item .image img {
max-width: 300px;
}
#line-flow2 .item .info {
background: #fafafa;
padding: 15px;
}
#line-flow2 .item .info dl {
width: 100%;
font-size: 85%;
}
#line-flow2 .item .info dt {
display: inline;
color: #009F00;
}
#line-flow2 .item .info dd {
display: inline;
}
#line-flow2 .btn {
text-align: center;
}
#line-flow2 .btn img {
max-width: 660px;
}
#caution {
background: #eee;
padding: 30px 0;
}
#caution .line-layout-box .item.add {
position: relative;
float: none;
float: right;
width: 310px;
margin-left: -340px;
z-index: 2;
}
#caution .line-layout-box .item.info {
width: 100%;
float: left;
}
#caution .line-layout-box .item.info .item-in {
margin-right: 370px;
}
#caution .line-layout-box .item.image {
width: 100%;
float: left;
}
#caution .line-layout-box .item.info .item-in .text {
position: relative;
z-index: 2;
}
#caution .line-layout-box .item.info .item-in .text2 {
position: relative;
z-index: 2;
max-width: 300px;
}
#caution .line-layout-box .item.info .image {
position: relative;
padding-bottom: 130px;
}
#caution .line-layout-box .item.info .image img {
position: absolute;
right: 0;
bottom: 0;
max-width: 240px;
}
@media screen and (max-width: 1000px) {
#caution .line-layout-box .item.info .image img {
right: -50px;
}
}
@media screen and (max-width: 900px) {
#caution .line-layout-box .item.info .image img {
right: -100px;
}
}
@media screen and (max-width: 800px) {
#caution .line-layout-box .item.info .image img {
right: -150px;
}
}
@media screen and (max-width: 768px) {
	/* =========================================================
	line
	========================================================= */
	.line-text-title {
	margin-bottom: 10px;
	font-size: 180%;
	}
	.line-text-title.type2 {
	margin-bottom: 20px;
	}
	.line-layout-box .item {
	float: none;
	width: auto;
	}
	.line-layout-box .item {
	float: none;
	}
	#line-preparation {
	padding: 0 0 10px 0;
	}
	#line .add .item-in > .title {
	font-size: 160%;
	}
	#line .add .account .id {
	font-size: 280%;
	}
	#line-preparation .line-layout-box .item.add {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 10px;
	}
	#line .add .qrcode .qr {
	padding: 10px 0 0 0;
	width: 140px;
	margin-right: -140px;
	}
	#line .add .qrcode .text p {
	padding: 20px 10px 10px 140px;
	}
	#line-preparation .line-layout-box .item.image {
	float: none;
	text-align: center;
	}
	#line-preparation .line-layout-box .item.image .item-in {
	margin: 0;
	padding: 0 10px;
	text-align: center;
	}
	#line-flow {
	background: #fff;
	padding: 0 0 20px 0;
	}
	#line-flow .line-layout-box .item.info {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 10px;
	text-align: center;
	}
	#line-flow .line-layout-box .item.image .item-in {
	margin: 0;
	padding: 0 10px;
	text-align: center;
	}
	#line-flow .line-layout-box .item.image {
	width: 100%;
	float: none;
	}
	#line-flow .info .time {
	font-size: 200%;
	line-height: 1.2;
	}
	#line-flow .info .text {
	margin-bottom: 10px;
	}
	#line-flow2 {
	padding: 0;
	}
	#line-flow2 .item {
	padding: 0 10px;
	}
	#line-flow2 .item:first-child .item-in {
	margin-right: 0;
	}
	#line-flow2 .item:last-child .item-in {
	margin-left: 0;
	}
	#line-flow2 .line-layout-box {
	margin-bottom: 20px;
	}
	#line-flow2 .item .image {
	text-align: center;
	padding: 10px;
	}
	#line-flow2 .area-in > .text {
	font-size: 100%;
	padding: 0 10px;
	margin-bottom: 10px;
	}
	#line-flow2 .area-in > .text br {
	display: none;
	}
	#line-flow2 .item .info {
	padding: 10px;
	}
	#line-flow2 .item .info dl {
	font-size: 90%;
	}
	#line-flow2 .item .info dt {
	display: block;
	}
	#line-flow2 .item .info dd {
	display: block;
	margin-bottom: 10px;
	line-height: 1.2;
	}
	#caution .line-layout-box .item.add {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 10px;
	}
	#caution .line-layout-box .item.info {
	float: none;
	padding: 10px;
	}
	#caution .line-layout-box .item.info .item-in {
	margin-right: 0;
	}
	#caution .line-layout-box .item.image {
	float: none;
	}
	#caution .line-layout-box .item.info .item-in .text {
	padding: 0 10px;
	}
	#caution .line-layout-box .item.info .item-in .text2 {
	max-width: none;
	padding: 0 10px;
	}
	#caution .line-layout-box .item.info .image {
	position: relative;
	padding-bottom: 0;
	text-align: center;
	}
	#caution .line-layout-box .item.info .image img {
	position: inherit;
	right: inherit;
	bottom: inherit;
	max-width: 240px;
	}
}