@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Bad+Script|Kalam|Lalezar|Shadows+Into+Light');
.lalezar { font-family: 'Lalezar', cursive;}
.kalam { font-family: 'Kalam', cursive;}
.shadowsinto { font-family: 'Shadows Into Light', cursive; }
.badscript { font-family: 'Bad Script', cursive; }

@import url(//use.fontawesome.com/releases/v5.4.1/css/all.css);

@media print{
    body { height:inherit; min-height:0; margin:0; padding:0;}
}
/* ---------------------------------------------
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
--------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ---------------------------------------------
 font-size 13pxBase
--------------------------------------------- */
html{ font-size:62.5%; color:#555; } /*初期値16pxの62.5%でルートが10px*/
body { font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif; font-weight:100; }

/*---------------------------------------------
 for IE8
---------------------------------------------
div { position:relative;}
/* ---------------------------------------------
 tag
--------------------------------------------- */
b,strong {font-weight:bold; color:#000;}
i { font-style:italic; }
em {color:#049; font-weight:bold; font-style:normal;}
sub {vertical-align:baseline;}
p { line-height:1.5;}
img {vertical-align:middle;}
/* link */
a,a:visited { color:#666; outline:none; transition:.2s; }
a span { cursor:pointer;}
a:hover { color:#333; text-decoration:underline; }
a img { border:none; }
a:hover img { opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha(opacity=80)"; transition:.2s;}
a:hover img.over { opacity:inherit; filter:none; -ms-filter:none; }
map area:hover img { opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha(opacity=80)"; transition:.2s;}
/* ---------------------------------------------
 js
--------------------------------------------- */
.over            {;/* rollover */}
.js_window_open-width-height {;}
.js_page_print   { cursor:pointer;}
.js_window_close {;}
.tile2,.tile3,.tile4,.tile5,.tile6 {;}
.hideattr {display:none;}
.debug .hideattr {display:inline-block; *display:inline; *zoom:1; margin-right:10px;}
.flexli { margin:0 auto; text-align:left; }


/* ---------------------------------------------
 PC/SP
--------------------------------------------- */
.hidePC { display:none !important; }
#linkPagetop a.sp { display:none; }
@media only screen and (max-width:767px) {
	html { padding:0; margin:0;}
	body { padding:0; margin:0; width:100%;}
	body {-webkit-text-size-adjust:100%; }
    iframe { max-width:100%; }
	img { max-width:100%; height:auto; }
    p.p { margin:20px 0; }
    ul.check li { background-size:15px; padding-left:25px; }
	.hidePC { display:inherit !important; }
	.hideSP { display:none !important; }
    /* .spscroll table{ width:100%; } */
	.spscroll { overflow:auto; }
	.spscroll::-webkit-scrollbar{ height:5px;}
	.spscroll::-webkit-scrollbar-track{ background:#F1F1F1;}
	.spscroll::-webkit-scrollbar-thumb { background:#BCBCBC;}
}
/* iOSでinputのフォーカス時に画面がズームするのを防ぐ */
input[type=text],
textarea {
  font-size: 16px;
  /*transform: scale(0.8);*/
}
/* ---------------------------------------------
 h*
--------------------------------------------- */
.main h2, .main h3, .main h4, .main h5, .main h6 { clear:both; }
.main div h2, .main div h3, .main div h4, .main div h5, .main div h6,
.main ul h2, .main ul h3, .main ul h4, .main ul h5, .main ul h6,
.main table h2, .main table h3, .main table h4, .main table h5, .main table h6 { clear:none; }
/* ---------------------------------------------
 hr
--------------------------------------------- */
.hr_dotted { border:none; border-bottom:1px dotted #999; }
/* ---------------------------------------------
 list
--------------------------------------------- */
/*.article ul li,*/
ul.list0 { text-align:left; }
ul.list0 li { padding:5px 0;  line-height:1.4; }

ul.list1 { margin:0 0 10px 15px; text-align:left;}
ul.list1 li { padding:2px 0; text-indent:-13px; }
ul.list1 li:before { content:'・'; font-family:'FontAwesome'; margin-right:2px; vertical-align:middle;  line-height:1.4; }

ul.check { margin:0 0 20px 15px; text-align:left;}
ul.check li { padding:5px 0; text-indent:-13px; }
ul.check li { padding-left:30px; background:url(/images/icon_check.png) 0 10px no-repeat; background-size: 20px auto; text-indent:0;  line-height:1.4; }
/*ul.check li:before { content:'\f00c'; font-family:'FontAwesome'; margin-right:8px; font-weight:normal !important; vertical-align:middle;  }*/

ul.idt { margin-left:1.3em; }
ul.idt li { text-indent:-1.3em; text-align:left; padding:0 0 10px; background:none;  line-height:1.4; }
ul.idt li span { font-weight:bold; color:#378; margin-right:2px;}

ol { margin:0 0 10px 1.7em; list-style:decimal outside; }
ol li { padding:10px 0 10px 5px; line-height:1.4; }

ul.inlineblock li { position:relative; display:inline-block; letter-spacing:normal; margin-right:25px; }
ul.inlineblock li img { vertical-align:middle; margin:3px;}

ul li.nolistmark { background:none;}



/* ---------------------------------------------
 table
--------------------------------------------- */
th,td {text-align:inherit; text-justify:auto; }

/* グレー */
.tbl { border-bottom:#ccc 1px solid; border-right:#ccc 1px solid; margin:5px 0 10px; background-color:#fff; }
.tbl caption { border:1px solid #ccc; text-align:left; font-weight:bold; padding:13px 15px; background-color:#18d; color:#fff; }
.tbl th { padding:13px 15px; vertical-align:top; text-align:left; font-weight:bold; color:#444;
    background-color:#eee; border-top:1px solid #ccc; border-left:1px solid #ccc;}
.tbl td { padding:13px 15px; border-top:1px solid #ccc; border-left:1px solid #ccc; vertical-align:top; }
.tbl td.noborder { border:none; }
.tbl td span { display:inline-block; *display:inline; *zoom:1; }

/* 横線のみ */
.tbl1 { border-bottom:#111 1px solid; margin:5px 0 10px; width:100%; }
.tbl1 th { padding:13px 15px; vertical-align:top; text-align:left; font-weight:bold; border-top:1px solid #111;}
.tbl1 td { padding:13px 15px; border-top:1px solid #111; vertical-align:top; text-align:left; }

/* 線なし */
.tbl0{ border:none;}
.tbl0 th { padding:5px; border:none; font-weight:normal; vertical-align:top; background:none;}
.tbl0 th.subth { padding-left:18px; font-weight:normal;}
.tbl0 td { padding:5px; vertical-align:top; border:none; background:none; }

/* 調整 */
table tr.noborder { border:none;}
table th.noborder-bottom,
table td.noborder-bottom { border-bottom:none;}
table .blankLefttop { border-left:0; border-top:0; background:none; }

thead.inlineL th,
tr.inlineL th,
tr.inlineL td { text-align:left;}

table.inlineC th,
table.inlineC td,
thead.inlineC th,
tr.inlineC th,
tr.inlineC td { text-align:center; padding-left:3px; padding-right:3px;}

.tbl p,
.tbl ul {font-size:100%; padding-bottom:6px;}

table ul.list1 { margin-bottom:0;}

table.th10p th { width:10%;}
table.th20p th { width:20%;}
table.th30p th { width:30%;}
table.th40p th { width:40%;}
table.th50p th { width:50%;}

.th_td_w1 th { width:18%; }
.th_td_w1 td { width:32%; }

.min-w-100px th { min-width:100px; }

/* ---------------------------------------------
  横並びグリッド
--------------------------------------------- */
/* レイアウト:横2つ  */
.cols2 { margin-right:-30px; }
    .cols2:after { content:""; display:table; clear:both; }
.cols2 .col { width:50%; float:left; }
.cols2 .col .colinner { margin:0 30px 30px 0;}

.cols2_project { width: 450px; margin: 0 auto 0 270px; }
    .cols2_project:after { content:""; display:table; clear:both; }
.cols2_project .col { width:50%; margin: 0; float:left; }
.cols2_project .col .colinner { margin:0 5px 30px 5px; }
.cols2_project .col .colinner p { padding: 0 !important; }

/* レイアウト:横3つ  */
.cols3 { margin-right:-30px; }
    .cols3:after { content:""; display:table; clear:both; }
.cols3 .col { width:33.3%; float:left; }
.cols3 .colspan2 { width:66.6%;}
.cols3 .col .colinner { margin:0 30px 30px 0; }

/* レイアウト:横4つ  */
.cols4 { margin-right:-20px; }
    .cols4:after { content:""; display:table; clear:both; }
.cols4 .col { width:25%; *width:24.95%; float:left; }
.cols4 .colspan2 { width:50%;}
.cols4 .col .colinner { margin:0 20px 20px 0; display:block; }

/* .colinner */
.colinner  { display:block; }
	.colinner:after { content:""; display:table; clear:both; }
.colinner img { max-width:100%; }

/*@media only screen and (max-width:1000px) {
    .cols2,
    .cols3,
    .cols4 { max-width:100%; margin-right:0;  }
    .cols2 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
    .cols3 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
    .cols4 .col .colinner { margin-right:auto; margin-left:auto; width:90%; }
}*/
@media only screen and (max-width:767px) {
	.cols2,
	.cols3 { margin-left:auto; margin-right:auto; max-width:none; }
	.cols2 .col,
	.cols3 .col { width:auto; margin:0 auto 10px; }
	.cols2 .col .colinner,
	.cols3 .col .colinner { margin:0 0 20px; width:auto; }
	.cols4 { margin-right:-10px; max-width:none; }
	.cols4 .col { width:50%; }
	.cols4 .col .colinner { margin:0 10px 10px 0; width:auto; }

    .cols2_project { width: 100%; margin: 0 auto; }
    .cols2_project .col { width:90%; margin: 0 5%; float:none; }
    .cols2_project .col .colinner { margin:0 0px 30px 0px; }
}



/* ---------------------------------------------
 clearfix
--------------------------------------------- */
.clearfix:after {  content:""; display:table; clear:both; }

/* ============================================

　見出し

============================================ */
h1 { font-family: 'Lalezar', cursive; color: #82A15B; font-size: 6.8rem; text-align:left; padding-left:13rem !important; text-indent:-10rem; }
h1 span { color: #049; padding-right: 2rem; line-height: inherit; }
h1.h1_form { font-size: 5rem; padding-left:0rem !important; text-indent:0 !important; }

@media only screen and (max-width:767px) {
h1 { width: 55%; padding-left:6rem !important; text-indent:-4.5rem;}
h1 span { padding-right: 0.8rem;  }

}


/* p */
p.p { line-height:1.8; margin:10px 0 20px;  }
p.note { font-size:1.2rem; margin-bottom:10px; }
@media only screen and (max-width:767px) {
    p.p { font-size:1.4rem; }
}

.img_center { text-align:center; margin:50px 0; }


/* ============================================

　#wrapper / リキッドレイアウト

============================================ */
body { text-align:center; position:relative; font-size:15px; font-size:1.6rem; background:#f7f7f0; }
html,body,#wrapper { ;}
#wrapper { margin:0 auto; min-width:960px; }
	#wrapper:after { content:""; display:table; clear:both; }

/* ============================================

　contents

============================================ */
.contents { max-width:920px; margin:0 auto; text-align:center;  }
    .contents:after { content:""; display:table; clear:both; }

@media only screen and (max-width:767px) {
	#wrapper { margin:0 auto; min-width:inherit;  }
	.contents { width:100%; float:none; margin-left:auto; margin-right:auto; }
}


/* ============================================

　#privacy

============================================ */
#privacy h1 { padding:5px 20px !important; line-height: 1; font-size: 3rem; margin: 0 0 30px 0; text-indent: 0rem;}
#privacy h2 { padding:5px 20px; line-height: 1; font-size: 2rem; text-align: left; color: #333; text-indent: 0rem; }
#privacy p  { text-align: left; padding: 10px 0 30px 35px; }
@media only screen and (max-width:767px) {
    #privacy h1 { width: 90%; padding:5px 5% !important; }
    #privacy p { width: 90%; padding:0px 5% 20px 5%; }
}

/* ============================================

　#project

============================================ */
#project section { margin: 0 0 30px 0; padding: 0; }
#project h1 { padding:5px 20px !important; line-height: 1; font-size: 3rem; margin: 0 0 30px 0; text-align: center; text-indent: 0rem; }
#project p  { text-align: left; padding:0px 100px 20px 100px; font-size: 1.5rem; }
@media only screen and (max-width:767px) {
    #project h1 { width: 90%; padding:5px 5% !important; }
    #project p { width: 90%; padding:0px 5% 20px 5%; }
}


/* ============================================

　movie

============================================ */
#movie { position: relative; margin: 20px 0 30px 0; }
#movie h1 { padding-top:5px; line-height: 0.8; }
#movie .movie_box {width: 840px; margin:0px auto; padding: 0;
    border-top:30px solid #99D2C4;
    border-bottom:30px solid #99D2C4;
    border-right:35px solid #99D2C4;
    border-left:40px solid #99D2C4;
    border-radius: 200px 10px 185px 15px / 15px 280px 15px 170px;
    filter: drop-shadow(7px 7px 0px rgba(160,160,100,0.2));
}
#movie .movie_box video { width:100%; }

.youtube_box {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.youtube_box iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

#movie .fukuro { position:absolute; top:-70px; right:-30px; }
#movie .fukuro .image-text { position: relative; }
#movie .fukuro .image-text img { width:100%; height: auto; max-width:212px; object-fit: cover; }
#movie .fukuro .image-text .text {
    width: 60%;
    position: absolute;
    padding: 0 20%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #333;
    font-size: 3rem;
    font-family: 'Bad Script', cursive;
    line-height:1.4;
    font-weight: 900;
}

@media only screen and (max-width:767px) {
#movie .movie_box { width: 90%; border:15px solid #99D2C4;}
#movie h1 { font-size: 3rem; }
#movie .fukuro { top:-8vw; right:0px; width: 30%; }
#movie .fukuro .image-text .text { font-size: 4.5vw; }
}

/* movie2 */
#movie2 { position: relative; margin: 80px 0 50px 0; }
#movie2 h1 { padding-top:5px; line-height: 0.8; }
#movie2 .movie_box2 {width: 700px; margin:0px auto; padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    filter: drop-shadow(7px 7px 0px rgba(160,160,100,0.2));
}
#movie2 .movie_box2 video { width:100%; }

#movie2 .fukuro2 { position:absolute; top:-30px; left:70px; }
#movie2 .fukuro2 .image-text { position: relative; width: 45%; }
#movie2 .fukuro2 .image-text img { width:100%; height: auto; object-fit: cover; }
#movie2 .fukuro2 .image-text .text {
    width: 90%;
    position: absolute;
    padding: 0 20%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 3rem;
    font-family: 'Bad Script', cursive;
    line-height:1.4;
    font-weight: 900;
}

/* movie switch button */
.movie_switch {
  position: relative;
  bottom: 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}
.movie_switch button {
  position: relative;
  width: 150px;
  align-self: center;
  /*background: transparent;*/
  background: #049;
  padding: 0.8rem 1rem;
  margin: 0 1rem;
  transition: all .3s ease;
  font-family: 'Lalezar', cursive;
  color: #fff;
  font-size: 1.8rem;
  outline: none;
  box-shadow: 10px 20px 10px -10px rgba(0, 0, 0, 0.1);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
.movie_switch button.on { background:#39c; }
.movie_switch button:hover { box-shadow: 1px 4px 4px -3px rgba(0, 0, 0, 0.3); cursor: pointer; }
.movie_switch button.lined.thin { border: solid 3px #049;}
.movie_switch button.lined.thin.on { border: solid 3px #39c;}

@media only screen and (max-width:767px) {
#movie2 .movie_box2 { width: 90%; border:15px solid #99D2C4; padding: 0; /*padding: 20px 0;*/ }
#movie2 h1 { font-size: 3rem; }
#movie2 .fukuro2 { top:-5vw; left:5px; width: 50%; }
#movie2 .fukuro2 .image-text {  width: 100%; }
#movie2 .fukuro2 .image-text .text { font-size: 4.5vw; }
.movie_switch { display: flex; bottom: 40px; /*flex-direction: column;*/ justify-content: center; }
.movie_switch button { width: 30%; align-self: center; margin-bottom: 2rem; margin: 0 0.3rem;}
}


/* ============================================

　talk

============================================ */
#talk { margin: 10px 0 50px 0;}
#talk .man_r { width: 100%; margin: 0 0 20px 0; padding: 0; }
    #talk .man_r:after { content:""; display:table; clear:both; }
#talk .man_r .face { float: right; width:15%; }
#talk .man_r .text_balloon { float: left;
    position:relative;
    width:85%;
    height:auto;
    background:#FFF;
    padding:0;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
#talk .man_r .text_balloon:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-left-color:#fff;
    left:100%;
    top:50px;
}
#talk .man_r .text_balloon p { padding: 30px 40px; color:#333; text-align: left; font-size: 2rem; }

#talk .woman_l { width: 100%; margin: 0 0 20px 0; padding: 0; }
    #talk .woman_l:after { content:""; display:table; clear:both; }
#talk .woman_l .face { float: left; width:15%; }
#talk .woman_l .text_balloon { float: right;
    position:relative;
    width:85%;
    height:auto;
    background:#fff;
    padding:0px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
#talk .woman_l .text_balloon:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-right-color:#fff;
    right:100%;
    top:50px;
}
#talk .woman_l .text_balloon p { padding: 30px 40px; color:#333; text-align: left; font-size: 2rem; }

#talk .text_balloon video { width: 80%; margin: 0 10%; }

@media only screen and (max-width:767px) {
#talk { width: 90%; margin: 10px 5% 50px 5%;}
#talk .man_r {}
#talk .man_r .face { width:15%; }
#talk .man_r .text_balloon { width:82%; margin-right: 3%; }
#talk .man_r .text_balloon:after{ top:30px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 7px;
    border-right-width: 5px;}
#talk .man_r .text_balloon p { padding: 15px 20px; }
#talk .woman_l {}
#talk .woman_l .face { width:15%; }
#talk .woman_l .text_balloon { width:82%; margin-right: 3%; }
#talk .woman_l .text_balloon:after{ top:30px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-right-width: 7px;}
#talk .woman_l .text_balloon p { padding: 15px 20px; }

#talk .text_balloon video { width: 100%; margin: 0 0; }
}


/* ============================================

　comments

============================================ */
#comments { width:100%; margin:0 auto; padding: 50px 0; text-align:left; background-color: #E2E2D7; line-height: 1.5; }
    #comments:after { content:""; display:table; clear:both; }
#comments .c_area { max-width:920px; margin:0 auto; }


/*  */
#comments .c_area .c_box { width:100%; margin: 0 0 50px 0; padding: 0;
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex; }
    #comments .c_area .c_box:after { content:""; display:table; clear:both; }
#comments .c_area .c_box .c_img_area { float: left; width:120px; text-align: center; margin: 0 20px 0 0; padding: 0; }
#comments .c_area .c_box .c_img_area img { width: 70px; height: auto; border-radius:50%; object-fit: cover; }
#comments .c_area .c_box .c_img_area .name { font-size: 1.6rem; font-weight: bold; padding: 3px 0; color: #333; }
#comments .c_area .c_box .c_img_area .date { font-size: 1.2rem; color: #999; }
#comments .c_area .c_box .c_img_area .date .time { padding: 0 0 0 10px; }
#comments .c_area .c_box .c_text { float: left; width:700px; margin: 0 20px 0 0; padding: 0;}
#comments .c_area .c_box .c_btn_area { float: right; margin: 0;position: relative; }
#comments .c_area .c_box .c_btn_area .c_btn {position: absolute; bottom: 0; }
#comments .c_area .c_box .c_btn_area .c_btn button { width:60px; text-align: center; padding: 2px 0px; color: #fff; font-family: 'Kalam', cursive; background: #999; border: none;cursor: pointer; outline: none; appearance: none;}
#comments .c_area .c_box .c_btn_area .c_btn button:hover { background: #666; }

#comments .form_area { width:920px; margin:0 auto;
  /*display: -webkit-box; /*Android4.3*/
  /*display: -moz-box;    /*Firefox21*/
  /*display: -ms-flexbox; /*IE10*/
  /*display: -webkit-flex; /*PC-Safari,iOS8.4*/
  /*display: flex;*/ }
    #comments .form_area:after { content:""; display:table; clear:both; }
#comments .input_area { width: 800px; margin:0 20px 0 0; padding: 0; }
    #comments .input_area:after { content:""; display:table; clear:both; }
#comments .input_area .cap {font-size: 1rem; text-align: right; }
#comments .name_area { float: left; font-size: 1.8rem; margin: 0 30px 0 0; }
#comments .name_area label { display:block; float:left; width:60px; font-family: 'Kalam', cursive;line-height: 1.8; }
#comments .name_area input { width: 248px; margin: 0; padding: 0; vertical-align: middle; line-height: 1.8; border:1px solid #999; background:#f7f7f0; }
#comments .mail_area { float: left; font-size: 1.8rem; }
#comments .mail_area label { display:block; float:left; width:50px; font-family: 'Kalam', cursive; }
#comments .mail_area input { width: 408px; margin:0; padding: 0; vertical-align: middle; line-height: 1.8; border:1px solid #999; background:#f7f7f0; }
#comments .cmnt_area textarea { width: 798px; height: 150px; margin:10px 0 0 0; padding: 0; line-height: 1.8; border:1px solid #999; background:#f7f7f0; resize: vertical; }


/*カスタマイズ*/
#comments .cap { width: 798px; display: block; font-size: 1rem; text-align: right; }
#comments .comment-form-comment textarea { width: 798px; height: 150px; margin:10px 0 0 0; padding: 0; line-height: 1.8; border:1px solid #999; background:#f7f7f0; resize: vertical; }
#comments .form-submit { position: relative; bottom: 70px; }
#comments .form-submit input.submit {width:100px; text-align: center; padding: 2px 0px; color: #fff; font-size: 2rem; font-family: 'Kalam', cursive; background: #999; border: none;cursor: pointer; outline: none; appearance: none;}
#comments .form-submit input.submit:hover { background: #666; }

#comments .comment-respond { margin: 20px 0;}

.logged-in-as { width: 50%; font-size: 1.2rem; position: relative; z-index: 200; }
    .logged-in-as:after { content:""; display:table; clear:both; }
/*Login　SEND OFF*/
body.logged-in .form-submit { /*display: none;*/ }

@media only screen and (max-width:767px) {
#comments { width:100%; float:none; margin-left:auto; margin-right:auto; }
#comments .c_area { width:100%; float:none; margin-left:auto; margin-right:auto; }
#comments .form-submit { position: static; bottom: 5px; }
#comments .cap { width:90%; margin: 0 5%; }
#comments .comment-form-comment textarea { width:100%; }


/*  */
#comments .c_area .c_box { display: block; }
#comments .c_area .c_box .c_img_area { float:none; margin:0 auto 20px auto; }
#comments .c_area .c_box .c_text { float: none; width: 90%; padding: 0 5%; margin: 0 0 10px; }
#comments .c_area .c_box .c_btn_area { float: none; bottom:auto; }
#comments .c_area .c_box .c_btn_area .c_btn { position: static; text-align: center; }

#comments { width:100%; display: block; }
#comments .form_area { width:100%; display: block; }
#comments .comment-respond{ width:90%; margin: 0 5%; float: none; text-align: left;}
#comments .name_area { float: none; display: block; margin: 0; }
    #comments .name_area:after { content:""; display:table; clear:both; }
#comments .name_area label { width:60px; }
#comments .name_area input { width: 248px; }
#comments .form_area .mail_area { float: none; display: block; }
    #comments .form_area .mail_area:after { content:""; display:table; clear:both; }
#comments .form_area .mail_area label { width:60px;}
#comments .form_area .mail_area input { width: 248px; margin:0; padding: 0; }
#comments .form_area .cmnt_area textarea { width: 100%; height: 100px; margin:10px 0; }



}

/*--------------------------------------------------------------
14.0 Comments
--------------------------------------------------------------*/

.comments-title {
	font-size: 20px;
	font-size: 1.25rem;
	margin-bottom: 1.5em;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
}
.comment-list li { clear: both; margin: 0 0 20px 0; }
.comment-list li:before {
	display: none;
}
b.fn { font-size: 18px;/*font-size: 16px;*/ }

.comment-body {/*margin-left: 65px;*/}
    .comment-body:after { content:""; display:table; clear:both; }

.comment-author {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 0.4em;
	position: relative;
	z-index: 2;
}
.comment-author img { width: 70px; height: auto; border-radius:50%; object-fit: cover; display: block; margin: 0 auto;}
.comment-author .avatar {
    display: none;
	height: 50px;
	/*left: -65px;*/
	/*position: absolute;*/
	width: 50px;
}

.comment-author .says {
	display: none;
}


.comment-meta {
    width:150px;
	margin-bottom: 50px;/*margin-bottom: 3em;*/
    margin-right: 50px;
    float: left;
    text-align: center;
}
@media only screen and (max-width:767px) {
.comment-meta { margin:0 0px 10px 0; width: 100%; text-align: left; float: none; }

}


.comment-metadata {
	color: #767676;
	font-size: 10px;
	font-size: 0.625rem;
	font-weight: 100;
	letter-spacing: 0;
	text-transform: uppercase;
}
span.edit-link { display: block; }
.comment-metadata a {
	color: #999;
     text-decoration: none;
    font-weight: 100;
}
.comment-metadata a time { font-size: 1.2rem; color: #999; letter-spacing:0; text-decoration: none; }

.comment-metadata a.comment-edit-link {
	color: #222;
	margin-left: 1em;
}
.comment-content {font-size: 16px; margin: 0 0 10px 0; }

.comment-body {
	color: #333;
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 0em;
}
.comment-body .reply { float: right; }
.comment-body .reply a { font-size: 14px;
    text-align: center;
    padding: 2px 10px;
    color: #fff;
    font-family: 'Kalam', cursive;
    background: #999;
    border: none;
    cursor: pointer;
    outline: none;
    text-decoration: none;}
.comment-body .reply a:hover { background: #666; }

h3.comment-reply-title small a { color: #333; }
.comment-reply-link {
	/*font-weight: 800;*/
	position: relative;
}

.comment-reply-link .icon {
	color: #222;
	left: -2em;
	height: 1em;
	position: absolute;
	top: 0;
	width: 1em;
}
@media only screen and (max-width:767px) {
.comment-body .reply { margin-right: 5%; }

}

.children .comment-author .avatar {
	height: 30px;
	left: -45px;
	width: 30px;
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {

}

.no-comments,
.comment-awaiting-moderation {
	color: #767676;
	font-size: 14px;
	font-size: 0.875rem;
	font-style: italic;
}

.comments-pagination {
	margin: 2em 0 3em;
}

.form-submit {
	text-align: right;
}


/* ============================================

　top img

============================================ */
#box_area { position: relative; margin:-150px 0 50px 0; width: 100%; height: auto; z-index: 100; }
    #box_area:before { content: ""; display: block; padding-top: 210%; }
div.box01 { position: absolute; top:100px; left: 0; z-index: 200; }
div.box02 { position: absolute; top:0; right: 0; z-index: 180; }
div.box03 { position: absolute; top:240px; left: 140px; z-index: 190; }
div.box04 { position: absolute; top:550px; left: -20px; z-index: 160;}
div.box05 { position: absolute; top:350px; right: -30px; z-index: 140; }
div.box06 { position: absolute; top:575px; right: 90px; z-index: 150;}
div.box07 { position: absolute; top:880px; left: 0; }
div.box08 { position: absolute; top:860px; right:-20px; z-index: 170;}
div.box09 { position: absolute; top:1150px; left: 60px; z-index: 150;}
div.box10 { position: absolute; top:1200px; right:0px; z-index: 140;}
div.box11 { position: absolute; top:1390px; left: -20px; z-index: 210;}
div.box12 { position: absolute; top:1470px; right: 0px; z-index: 200;}
div.box13 { position: absolute; top:1650px; left: 0; z-index: 220; }

#box_area a img { transition:0.2s; }
#box_area a img:hover{ transform:translate(0,-3px); opacity: 1; }

#box_area img.illust_02 { position: absolute; top:240px; right:30px; z-index: 300; }
#box_area img.illust_03 { position: absolute; top:420px; left:-30px; z-index: 400; }
#box_area img.illust_04 { position: absolute; top:500px; right:-70px; z-index: 150; }
#box_area img.illust_05 { position: absolute; top:1100px; left:10px; z-index: 500; }
#box_area img.illust_06 { position: absolute; top:1850px; right:10px; z-index: 600; }

@media only screen and (max-width:767px) {
#box_area { position: static; width: 90%; margin: 0 5% 50px 5%;}
    #box_area:before { padding-top:0; }
div.box01 { position:static; }
div.box02,
div.box03,
div.box04,
div.box05,
div.box06,
div.box07,
div.box08,
div.box09,
div.box10,
div.box11,
div.box12,
div.box13 { position:static; margin-top: -50px; }
div.box01 a img,
div.box02 a img,
div.box03 a img,
div.box04 a img,
div.box05 a img,
div.box06 a img,
div.box07 a img,
div.box08 a img,
div.box09 a img,
div.box10 a img,
div.box11 a img,
div.box12 a img,
div.box13 a img { max-width: 80%; }
#box_area img.illust_02 { width: 20%; max-width: 132px; top:25%; left:5px; }
#box_area img.illust_03 { width: 25%; top:50%; left:5px; }
#box_area img.illust_04 { width: 20%; top:35%; right:5px; }
#box_area img.illust_05 { width: 25%; max-width: 132px; top:34%; left:10px; }
#box_area img.illust_06 { width: 30%; top:67%; right:5px; }
}

@media only screen and (max-width:321px) {
#box_area img.illust_06 { width: 30%; top:62%; right:5px; }
}


/* ---------------------------------------------
 form
--------------------------------------------- */
.form input { margin-right:5px; vertical-align:middle; -webkit-appearance: none; }
.form input:focus { outline:none;}
.form label  { vertical-align:middle; line-height:1.4; margin:0 5px; }
.form select {padding:5px 4px 7px; border:1px solid #ddd; background:#fff; line-height:1.4; vertical-align:middle; margin:0 5px; outline:none; }
.form input.text,
.form textarea.text{ padding:7px 4px 5px; border:2px solid #ddd; background:#fff; line-height:1.4; vertical-align:middle; margin:0 5px; border-radius:0; }
.inputtext { padding:9px 4px 11px; border:0; background:#fff; vertical-align:middle; margin-bottom:3px; padding:11px 4px; }
.alphanumeric { ime-mode:disabled; }



.btn1,
.btn1:visited { padding:20px 30px; font-size:18px; color:#fff; background-color:#39c; text-decoration:none; text-align:center; margin:0 5px;
	position:relative; display:inline-block; *display:inline; *zoom:1;  outline:none; border:0; cursor:pointer; }
	.btn1:hover { text-decoration:none; color:#fff; background-color:#36c; }

.btn1b,
.btn1b:visited { background-color:#bbb; }
	.btn1b:hover { background-color:#ccc; }

.btnarea { text-align:center; margin:30px 0; }
.btnarea input,
.btnarea button,
.btnarea a { margin:5px; cursor:pointer; display:inline-block; vertical-align:middle;}

.require { color:#fff; font-size:1.1rem; font-weight:normal; line-height:1.2;
    display:inline-block; padding:2px 4px; margin-left:5px; background:#c05; }

.form table th { width:25%;	}
.form table .errmsg { color:#c05; margin:5px 0 0 5px; padding:0; 	}
.form input.err { background:#fee;}

.form table p { margin:0 5px; padding:0; line-height:1.2;  }

.mw_wp_form input,
.mw_wp_form textarea
{ margin-top:5px; margin-bottom:5px; background:#f8f8f8; border:1px solid #ddd; padding:7px 4px 5px; line-height:1.4; vertical-align: middle;
    box-shadow:1px 1px 2px #eee inset; max-width:550px; }
.mw_wp_form input[type="submit"] { background:#fff; padding:10px 20px; margin:20px 5px;  }

.mw_wp_form_input .confirm_ctnt { display:none; }
.mw_wp_form_confirm .input_ctnt { display:none; }
.mw_wp_form_confirm .confirm_ctnt { display:block; margin-bottom: 10px; }

.cols3 .btn1,
.cols3 .btn1:visited { padding:20px 30px; font-size:18px; color:#fff; background-color:#39c; text-decoration:none; text-align:center; margin:0 5px; position:relative; display:block; *display:inline; *zoom:1;  outline:none; border:0; cursor:pointer; }
	.cols3 .btn1:hover { text-decoration:none; color:#fff; background-color:#36c; }

table { width: 100%; border-bottom:#ccc 1px solid; border-right:#ccc 1px solid; line-height:1.2; margin-bottom:10px; background:#fff; }
table caption { border:1px solid #ccc; text-align:left; font-weight:bold; padding:13px 15px; background-color:#18d; color:#fff; }
table th,
table td { border-top:1px solid #ccc; border-left:1px solid #ccc; padding:7px 10px; line-height:1.4; vertical-align:middle; text-align:left; }
table th { font-weight:bold; color:#444; background-color:#eee; }
table td { ;}
table td.noborder {border:none;}
table td p { line-height:1.4; }

 br.sp { display:none; }

@media only screen and (max-width:767px) {
/* table */
    table { width: 90%; margin:10px 5%; }
	.tbl th,
	.tbl td { padding:5px; }
	td a {word-break:break-all;}

	.spTbl tr,
	.spTbl th,
	.spTbl td { display:block; width:inherit; }
	.spTbl td { border-top:none !important;}
	.spTbl input,
	.spTbl textarea { max-width:260px;}
}
@media only screen and (max-width:550px) {
    br.sp { display: block; }
}

/* ============================================

　#header

============================================ */

#header { position: relative; padding:30px 0 50px 0; width:920px; height: 240px; margin: 0 auto; z-index:20; }
	#header:after { content:""; display:table; clear:both; }
#header .logo { position: absolute; top:30px; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 40; }
#header .logo img.logo1 { position: absolute; top:0px; left: 0; right: 0; margin: 0 auto; }
#header .logo img.logo2 { position: absolute; top:135px; left: 0; right: 0; margin: 0 auto; }
#header a { text-decoration:none; }
#header a:hover { text-decoration:underline; }
#header a.top { position: absolute; top:200px; left:100px; z-index: 50;}
#header .c_illust { position: absolute; top:180px; left:20px; }
body.home #header { overflow: hidden; height: 400px; }
body.home #header .top_balloon { position: absolute; z-index: 30;
    width: 370px;
    height: 240px;
    top:90px;
    left: 0;
    right:5%;
    margin: 0 auto;
    padding:70px 50px 0 80px;
    background: url(/images/top_balloon.png) no-repeat; }
body.home #header .top_balloon p { text-align: left; padding: 10% 0 0 0; font-size: 1.3em; font-weight: bold; }
body.home #header .top_balloon a.btn_p { z-index: 300; display: block; }
body.home #header img.woman { position: absolute; top:120px; left:10px; }
body.home #header img.illust_01 { position: absolute; top:180px; right:0; }
body.home .contents a.btn_p { position: absolute; top:330px; left:43%; z-index:1000;}

@media only screen and (max-width:767px) {
    /*#headblock { z-index:999; }*/
    #header { /*position:fixed;*/ top:0; left:0; width:90%; height: auto; }
    #header:before {
        content: "";
        display: block;
        padding-top: 27%; }
    #header .logo { top:20px; left: 0; right: 0; margin: 0 auto; width:100%; height: 100%; }
    #header .logo img.logo1 { width:100%; }
    #header .logo img.logo2 { width:55%; top:48%; }
    #header a.top { top:65%; left:0%; }

    #header .c_illust { width:70%; top:68%; left:5%; }

body.home #header { width:90%; height: auto; overflow: inherit; }
body.home #header:before {
        content: "";
        display: block;
        padding-top: 60%; }
body.home #header .top_balloon { width:60%; height: 60%; padding: 10% 10% 0 15%; left: 15%; background-size:contain; }
body.home #header .top_balloon p { /*font-size: 1.5rem;*/ }
body.home #header img.woman { width: 25%; top:35%; left:-3%; }
body.home #header img.illust_01 { width: 32%; top:80%; right:-5%; z-index: 60; }
body.home .contents a.btn_p { top:6.5%; left:43%; }
}
@media only screen and (max-width:600px) {
    body.home #header .top_balloon p { font-size: 1.2rem; }
    #header .c_illust { top:75%; left:5%; }
    body.home .contents a.btn_p { top:5.5%; left:38%; width: 30%; }
}
@media only screen and (max-width:321px) {
body.home #header .top_balloon { top: 65px; }
body.home .contents a.btn_p { top:5.5%; }
}

/* ============================================

　#footer

============================================ */

#footer { padding-bottom:30px; }
#footer .contentsinner { width: 920px; margin: 0 auto; padding: 0 0 0 0; text-align: center; }

/* #footer .footerlinks 未使用 */
#footer .footerlinks { padding:50px 0; }
#footer .footerlinks h2 { font-family: 'Kalam', cursive; font-size: 3rem; margin: 0 0 30px 0; padding: 0; color: #333; }
#footer .footerlinks ul { margin: 0 0 50px 0}
#footer .footerlinks ul li { display: inline-block; margin: 0 0 30px 0; padding: 0; }
#footer .footerlinks ul li:hover { opacity: 0.8; }
#footer .footerlinks ul li:nth-child(even) { position: relative; top:30px; }
#footer .footerlinks ul li a { padding:0px; margin: 0; text-decoration: none; }
#footer .footerlinks ul li a:hover { text-decoration:underline; }
#footer .footerlinks ul li .image-text { position: relative; }
#footer .footerlinks ul li .image-text img { width: 100px; height: auto; border-radius:50px; object-fit: cover; }
#footer .footerlinks ul li .image-text .text {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 1.5rem;
    font-family: 'Lalezar', cursive;
    line-height:1.4;
    text-shadow: 2px 2px 0px #000,
             -2px 2px 0px #000,
             2px -2px 0px #000,
             -2px -2px 0px #000;
}

#footer h2 { font-family: 'Kalam', cursive; font-size: 3rem; margin:50px 0 0 0; padding: 0; color: #333; }
#footer .menu_map { margin:20px 0 50px 0; padding: 0; }
    #footer .menu_map:after { content:""; display:table; clear:both; }
#footer .menu_map .map1,
#footer .menu_map .map2 { float: left; position: relative; width: 50%; height: 100%; padding: 45.6% 0 0; }
#footer .menu_map .map1 { background: url(../../images/footer_map_01.png) no-repeat; }
#footer .menu_map .map2 { background: url(../../images/footer_map_02.png) no-repeat; }
#footer .menu_map a { background-color:#f7f7f0; display:block; border-radius:50%; }
#footer .menu_map .image-text { position: relative; width: 100px; }
#footer .menu_map .image-text img { width: 100%; height: auto; border-radius:50%; object-fit: cover; }
#footer .menu_map .image-text .text {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 1.5rem;
    font-family: 'Lalezar', cursive;
    line-height:1.4;
    text-shadow: 2px 2px 0px #000,
             -2px 2px 0px #000,
             2px -2px 0px #000,
             -2px -2px 0px #000;
}
#footer .menu_map .map1 .c1 { position: absolute; top:66.7%; left:26.0%; }
#footer .menu_map .map1 .c2 { position: absolute; top:66.7%; left:77.5%; }
#footer .menu_map .map1 .c3 { position: absolute; top:73.8%; left:52.3%; }
#footer .menu_map .map1 .c4 { position: absolute; top:15.5%; left: 8.7%; }
#footer .menu_map .map1 .c6 { position: absolute; top: 1.2%; left:30.4%; }
#footer .menu_map .map1 .c7 { position: absolute; top: 1.2%; left:56.1%; }
#footer .menu_map .map1 .c8 { position: absolute; top:15.5%; left:77.5%; }
#footer .menu_map .map2 .c5 { position: absolute; top:66.7%; left:60.0%; }
#footer .menu_map .map2 .c9 { position: absolute; top:72.0%; left:10.0%; }
#footer .menu_map .map2 .c10 { position: absolute; top:74.0%; left:36.0%; }
#footer .menu_map .map2 .c11 { position: absolute; top:50.0%; left:80.0%; }
#footer .menu_map .map2 .c12 { position: absolute; top:45.0%; left:0.0%; }
#footer .menu_map .map2 .c13 { position: absolute; top:0.0%; left:50.0%; }

#footer .sns { padding:0 0 30px 0; }
#footer .sns li { display:inline-block; margin:0 15px; }
#footer .sns li a { color:#333; }
#footer .sns li a:hover { color:#666; }
#footer .sns li.sns_insta a {  }
#footer .sns li.sns_fb a {  }
#footer .sns li.privacy a img{ vertical-align: sub; }

#footer .sns_area { margin: 0 0 50px 0; padding: 0; }
    #footer .sns_area:after { content:""; display:table; clear:both; }
#footer .sns_area .fb_area { float: left; margin: 0 auto; max-width: 920px; /* max-width: 450px; */ width: 100%; }
#footer .sns_area .insta_area { display: none;/* 非表示 */ float: right; width: 96%; max-width: 408px; /*border: 1px solid #E2E2D7;*/ background: #fcfcfc; padding: 20px 2%; margin: 0 auto 20px; text-align: center; }
#footer .sns_area .insta_area .title { font-family: 'Lalezar', cursive; font-size: 3rem; margin: 15px 0 15px 0; }
#footer .sns_area .insta_area .title a { text-decoration: none; }
#footer .sns_area .insta_area ul.insta { margin: 0 auto; }
#footer .sns_area .insta_area ul.insta li { width: 28%; padding: 0; margin: 0 2% 10px 2%; height: 115px; overflow: hidden; border: none; display: inline-block;}
#footer .sns_area .insta_area ul.insta li a img { width: 100%; height: 100%; object-fit: cover; }

#footer .logo_tuat { width: 85px; margin: 10px auto 20px auto; padding: 0; }
#footer .bnr_j-support img { width: 100%; max-width: 500px; margin: 10px auto 20px auto; padding: 0; }
#footer #copyright { font-family: 'Shadows Into Light', cursive; font-size:1.6rem; letter-spacing:0.1rem; }
#footer #copyright span { display:inline-block; margin:0 5px; }

@media only screen and (max-width:767px) {
    #footer { padding-bottom:30px; width: 100%;  }
    #footer .contentsinner { width: 100%; }
    /* #footer .footerlinks 未使用 */
    #footer .footerlinks h2 { font-size: 2.2rem; margin: 0 0 30px 0; }
    #footer .footerlinks ul li .image-text img { width: 100px; border-radius:50px; }
    #footer .footerlinks ul li:nth-child(even) { top:0px; }
    #footer .footerlinks a { font-size:1.4rem; }

    #footer .sns_area { text-align: center; margin: 0 auto 30px auto}
    #footer .sns_area .fb_area { float: none; text-align: center; margin:0 auto 20px auto; }
    #footer .sns_area .insta_area { float: none; }

    #footer #copyright { font-size:1rem; }

#footer .menu_map .map1,
#footer .menu_map .map2 { float: none; width: 100%; max-width:460px; min-height: 420px; margin: 0px auto; padding:0; background-size: contain; background-position: center center; }

#footer .sns li { display:inline-block; margin:0 5px; }

}
@media only screen and (max-width:500px) {
    #footer .footerlinks a { font-size:1rem; margin:auto 0; }
}

@media only screen and (max-width:400px) {
#footer .menu_map .map1,
#footer .menu_map .map2 { min-height: 360px; }
#footer .menu_map .map1 .c1,
#footer .menu_map .map1 .c2,
#footer .menu_map .map1 .c3,
#footer .menu_map .map1 .c4,
#footer .menu_map .map1 .c6,
#footer .menu_map .map1 .c7,
#footer .menu_map .map1 .c8,
#footer .menu_map .map2 .c5,
#footer .menu_map .map2 .c9,
#footer .menu_map .map2 .c10,
#footer .menu_map .map2 .c11,
#footer .menu_map .map2 .c12,
#footer .menu_map .map2 .c13 { width:85px; }
#footer .menu_map .image-text { width: 100%; }

}




/* #linkPagetop */
#linkPagetop { transition:bottom .4s ease-in-out; z-index:999;
    position:fixed; right:10px; bottom:-70px; width:auto; height:58px; }
    body.nottop #linkPagetop { bottom:10px; }
#linkPagetop a { display:inline-block; padding:6px 15px 14px; color:#06c; font-size:3rem; font-weight: bold; background:#eee;
    border-radius: 30px; border:4px solid #fff; font-family:'FontAwesome'; line-height: 1; z-index: 99; text-decoration:none; }
#linkPagetop a:hover { color:#06c; text-decoration:none; background:#f9f9f9; }
@media only screen and (max-width:767px) {
    #linkPagetop a.pc { display:none; }
    #linkPagetop a.sp { display:inline-block; }
}



/* ============================================
　Layout
============================================ */
.mt { margin-top:30px !important; }
.mb { margin-bottom:30px !important; }
.m0 { margin:0 !important; }
.mr05 { margin-right: 5px !important; }
/* width % */
.w05p { width:5%;} .w06p { width:6%;} .w07p { width:7%;} .w08p { width:8%;} .w09p { width:9%;} .w10p { width:10%;} .w11p { width:11%;} .w12p { width:12%;} .w13p { width:13%;} .w14p { width:14%;} .w15p { width:15%;} .w16p { width:16%;} .w17p { width:17%;} .w18p { width:18%;} .w19p { width:19%;} .w20p { width:20%;} .w25p { width:25%;} .w30p { width:30%;} .w33p { width:33%;} .w40p { width:40%;} .w50p { width:50%;} .w60p { width:60%;} .w70p { width:70%;} .w80p { width:80%;} .w90p { width:90%;} .w100p { width:100%;}
/* display % */
.ib { display:inline-block; }
/* align */
.inlineL { text-align:left !important; } .inlineC { text-align:center !important; } .inlineR { text-align:right !important; } .vlineT { vertical-align:top    !important; } .vlineM { vertical-align:middle !important; } .vlineB { vertical-align:bottom !important; }
/* .clear */
br.clear { clear:both; height:0; font-size:0; line-height:0; }
@media only screen and (max-width:767px) {
   /* width % */
    .w05p_sp { width:5%;} .w06p_sp { width:6%;} .w07p_sp { width:7%;} .w08p_sp { width:8%;} .w09p_sp { width:9%;} .w10p_sp { width:10%;} .w11p_sp { width:11%;} .w12p_sp { width:12%;} .w13p_sp { width:13%;} .w14p_sp { width:14%;} .w15p_sp { width:15%;} .w16p_sp { width:16%;} .w17p_sp { width:17%;} .w18p_sp { width:18%;} .w19p_sp { width:19%;} .w20p_sp { width:20%;} .w25p_sp { width:25%;} .w30p_sp { width:30%;} .w33p_sp { width:33%;} .w40p_sp { width:40%;} .w50p_sp { width:50%;} .w60p_sp { width:60%;} .w70p_sp { width:70%;} .w80p_sp { width:80%;} .w90p_sp { width:90%;} .w100p_sp { width:100%;}
    /* margin % */
    .mt { margin-top:15px !important; }
    .mb { margin-bottom:15px !important; }
}
@media only screen and (max-width:767px) {
    #wrapper #main .contentsinner { width:90%; margin:auto; }
    #wrapper #main .spflnone .tx { float:none; width:auto; }
    #wrapper #main .spflnone .img { float:none; width:auto; }
}