@charset "UTF-8";
/** YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) http://cssreset.com Copyright 2012 Yahoo! Inc. All rights reserved. http://yuilibrary.com/license/ */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
@import url("//fonts.googleapis.com/css?family=Lato:400,700,300");
html { color: #000; background: #FFF; }

/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

/* to preserve line-height and selector appearance */
sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select { *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend { color: #000; }

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

/* ---------------------------------- fonts and web fonts  ----------------------------------*/
.gothic, body { font-family: "Lato", "Helvetica Neue",Helvetica,Arial,"游ゴシック","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","ＭＳ ゴシック",sans-serif; }

.serif { font-family: "Gaorgia","Times New Roman",Times,"游明朝","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝",serif; }

/* ---------------------------------- mixin ----------------------------------*/
/* ---------------------------------- base  ----------------------------------*/
html, body { height: 100%; font-size: 62.5%; }

body { background-color: #ffffff; font-size: 13px; font-size: 1.3rem; line-height: 1.6; -webkit-text-size-adjust: none; color: #000000; }

a { color: #2e89cd; text-decoration: none; }

/* ---------------------------------- default settings ----------------------------------*/
.mincho { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }

/* creafirx */
/* REF: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before, #chance .reasons ul:before, #place .area__box .list:before, #tokidoki__plan .plan__box .plan:before, #tokidoki__office .photo__box:before, .cf:after, #chance .reasons ul:after, #place .area__box .list:after, #tokidoki__plan .plan__box .plan:after, #tokidoki__office .photo__box:after { content: " "; /* 1 */ display: table; /* 2 */ }

.cf:after, #chance .reasons ul:after, #place .area__box .list:after, #tokidoki__plan .plan__box .plan:after, #tokidoki__office .photo__box:after { clear: both; }

/** For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */
.cf, #chance .reasons ul, #place .area__box .list, #tokidoki__plan .plan__box .plan, #tokidoki__office .photo__box { *zoom: 1; }

/* width */
.w10 { width: 10px; }

.w15 { width: 15px; }

.w20 { width: 20px; }

.w25 { width: 25px; }

.w30 { width: 30px; }

.w35 { width: 35px; }

.w40 { width: 40px; }

.w45 { width: 45px; }

.w50 { width: 50px; }

.w55 { width: 55px; }

.w60 { width: 60px; }

.w65 { width: 65px; }

.w70 { width: 70px; }

.w75 { width: 75px; }

.w80 { width: 80px; }

.w85 { width: 85px; }

.w90 { width: 90px; }

.w95 { width: 95px; }

.w100 { width: 100px; }

.w110 { width: 110px; }

.w120 { width: 120px; }

.w130 { width: 130px; }

.w140 { width: 140px; }

.w150 { width: 150px; }

.w160 { width: 160px; }

.w170 { width: 170px; }

.w180 { width: 180px; }

.w190 { width: 190px; }

.w200 { width: 200px; }

.w210 { width: 210px; }

.w220 { width: 220px; }

.w230 { width: 230px; }

.w240 { width: 240px; }

.w250 { width: 250px; }

.w260 { width: 260px; }

.w270 { width: 270px; }

.w280 { width: 280px; }

.w290 { width: 290px; }

.w300 { width: 300px; }

.w310 { width: 310px; }

.w320 { width: 320px; }

.w330 { width: 330px; }

.w340 { width: 340px; }

.w350 { width: 350px; }

.w360 { width: 360px; }

.w370 { width: 370px; }

.w380 { width: 380px; }

.w390 { width: 390px; }

.w400 { width: 400px; }

.w410 { width: 410px; }

.w420 { width: 420px; }

.w430 { width: 430px; }

.w440 { width: 440px; }

.w450 { width: 450px; }

.w460 { width: 460px; }

.w470 { width: 470px; }

.w480 { width: 480px; }

.w480 { width: 480px; }

.w490 { width: 490px; }

.w500 { width: 500px; }

.w510 { width: 510px; }

.w520 { width: 520px; }

.w530 { width: 530px; }

.w540 { width: 540px; }

.w550 { width: 550px; }

.w560 { width: 560px; }

.w570 { width: 570px; }

.w580 { width: 580px; }

.w590 { width: 590px; }

.w600 { width: 600px; }

.w610 { width: 610px; }

.w620 { width: 620px; }

.w630 { width: 630px; }

.w640 { width: 640px; }

.w650 { width: 650px; }

.w660 { width: 660px; }

.w670 { width: 670px; }

.w680 { width: 680px; }

.w690 { width: 690px; }

.w700 { width: 700px; }

.w710 { width: 710px; }

.w720 { width: 720px; }

.w730 { width: 730px; }

.w740 { width: 740px; }

.w750 { width: 750px; }

.w760 { width: 760px; }

.w770 { width: 770px; }

.w780 { width: 780px; }

.w790 { width: 790px; }

.w800 { width: 800px; }

.wp10 { width: 10%; }

.wp15 { width: 15%; }

.wp20 { width: 20%; }

.wp25 { width: 25%; }

.wp30 { width: 30%; }

.wp35 { width: 35%; }

.wp40 { width: 40%; }

.wp45 { width: 45%; }

.wp50 { width: 50%; }

.wp55 { width: 55%; }

.wp60 { width: 60%; }

.wp65 { width: 65%; }

.wp70 { width: 70%; }

.wp75 { width: 75%; }

.wp80 { width: 80%; }

.wp85 { width: 85%; }

.wp90 { width: 90%; }

.wp95 { width: 95%; }

.wp100 { width: 100%; }

/* margin */
.killmgnt { margin-top: 0px !important; }

.killmgnr { margin-right: 0px !important; }

.killmgnb { margin-bottom: 0px !important; }

.killmgnl { margin-left: 0px !important; }

.mgnt5 { margin-top: 5px !important; }

.mgnr5 { margin-right: 5px !important; }

.mgnb5 { margin-bottom: 5px !important; }

.mgnl5 { margin-left: 5px !important; }

.mgnt10 { margin-top: 10px !important; }

.mgnr10 { margin-right: 10px !important; }

.mgnb10 { margin-bottom: 10px !important; }

.mgnl10 { margin-left: 10px !important; }

.mgnt15 { margin-top: 15px !important; }

.mgnr15 { margin-right: 15px !important; }

.mgnb15 { margin-bottom: 15px !important; }

.mgnl15 { margin-left: 15px !important; }

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

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

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

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

.mgnt25 { margin-top: 25px !important; }

.mgnr25 { margin-right: 25px !important; }

.mgnb25 { margin-bottom: 25px !important; }

.mgnl25 { margin-left: 25px !important; }

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

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

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

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

.mgnt35 { margin-top: 35px !important; }

.mgnr35 { margin-right: 35px !important; }

.mgnb35 { margin-bottom: 35px !important; }

.mgnl35 { margin-left: 35px !important; }

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

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

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

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

.mgnt45 { margin-top: 45px !important; }

.mgnr45 { margin-right: 45px !important; }

.mgnb45 { margin-bottom: 45px !important; }

.mgnl45 { margin-left: 45px !important; }

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

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

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

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

.mgnt55 { margin-top: 55px !important; }

.mgnr55 { margin-right: 55px !important; }

.mgnb55 { margin-bottom: 55px !important; }

.mgnl55 { margin-left: 55px !important; }

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

.mgnr60 { margin-right: 60px !important; }

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

.mgnl60 { margin-left: 60px !important; }

.killpdgt { padding-top: 0px !important; }

.killpdgr { padding-right: 0px !important; }

.killpdgb { padding-bottom: 0px !important; }

.killpdgl { padding-left: 0px !important; }

.pdgt5 { padding-top: 5px !important; }

.pdgr5 { padding-right: 5px !important; }

.pdgb5 { padding-bottom: 5px !important; }

.pdgl5 { padding-left: 5px !important; }

.pdgt10 { padding-top: 10px !important; }

.pdgr10 { padding-right: 10px !important; }

.pdgb10 { padding-bottom: 10px !important; }

.pdgl10 { padding-left: 10px !important; }

.pdgt15 { padding-top: 15px !important; }

.pdgr15 { padding-right: 15px !important; }

.pdgb15 { padding-bottom: 15px !important; }

.pdgl15 { padding-left: 15px !important; }

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

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

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

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

.pdgt25 { padding-top: 25px !important; }

.pdgr25 { padding-right: 25px !important; }

.pdgb25 { padding-bottom: 25px !important; }

.pdgl25 { padding-left: 25px !important; }

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

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

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

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

/* text align */
.text__left { text-align: left; }

.text__center { text-align: center; }

.text__right { text-align: right; }

.text__italic { font-style: italic; }

.text__bold { font-weight: bold; }

/* float */
.float__rght { float: right; }

.float__left { float: left; }

/* img */
img { margin: 0; padding: 0; vertical-align: bottom; }

/* line-height */
.lh10 { line-height: 1; }

.lh11 { line-height: 1.1; }

.lh12 { line-height: 1.2; }

.lh13 { line-height: 1.3; }

.lh14 { line-height: 1.4; }

.lh15 { line-height: 1.5; }

.lh16 { line-height: 1.6; }

.lh17 { line-height: 1.7; }

.lh18 { line-height: 1.8; }

.lh19 { line-height: 1.9; }

.lh20 { line-height: 2; }

/* font-size */
.f7 { font-size: 7px; font-size: 0.7rem; }

.f8 { font-size: 8px; font-size: 0.8rem; }

.f9 { font-size: 9px; font-size: 0.9rem; }

.f10 { font-size: 10px; font-size: 1.0rem; }

.f11 { font-size: 11px; font-size: 1.1rem; }

.f12 { font-size: 12px; font-size: 1.2rem; }

.f13 { font-size: 13px; font-size: 1.3rem; }

.f14 { font-size: 14px; font-size: 1.4rem; }

.f15 { font-size: 15px; font-size: 1.5rem; }

.f16 { font-size: 16px; font-size: 1.6rem; }

.f17 { font-size: 17px; font-size: 1.7rem; }

.f18 { font-size: 18px; font-size: 1.8rem; }

.f19 { font-size: 19px; font-size: 1.9rem; }

.f20 { font-size: 20px; font-size: 2.0rem; }

.f21 { font-size: 21px; font-size: 2.1rem; }

.f22 { font-size: 22px; font-size: 2.2rem; }

.f23 { font-size: 23px; font-size: 2.3rem; }

.f24 { font-size: 24px; font-size: 2.4rem; }

.f25 { font-size: 25px; font-size: 2.5rem; }

.f26 { font-size: 26px; font-size: 2.6rem; }

.f27 { font-size: 27px; font-size: 2.7rem; }

.f28 { font-size: 28px; font-size: 2.8rem; }

.f29 { font-size: 29px; font-size: 2.9rem; }

.f30 { font-size: 30px; font-size: 3.0rem; }

.f36 { font-size: 36px; font-size: 3.6rem; }

/* round box */
.round__box_1 { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px; }

.round__box_2 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; }

.round__box_3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; }

.round__box_5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }

.round__box_10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

/* after */
/* table */
table.table { width: 100%; }
table.table th { vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
table.table td { vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

input[type="text"] { display: inline-block; margin: 0 1px; padding: 2px; border: 1px solid #cccccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; }

textarea { padding: 2px; border-left: 1px solid #999999; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; }

/* navigation with circle */
ul.default { list-style: none; padding-left: 0; margin-bottom: 15px; display: table; }

ul.default li:after { content: ""; display: block; }

ul.default li { display: table-row; }

ul.default li:before { content: ""; display: table-cell; padding-right: 0.4em; }

ol.default { list-style: none; padding-left: 0; display: table; }

ol.default li:after { content: ""; display: block; }

ol.default li { display: table-row; counter-increment: table-ol; }

ol.default li:before { content: counter(table-ol) "."; display: table-cell; padding-right: 0.4em; text-align: right; }

/* button */
.btn { clear: both; display: inline-block; margin: 3px; padding: 5px 10px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #000000; background: #ffffff; border: 1px solid #ffffff; text-decoration: none; cursor: pointer; }

.btn:hover { color: #000000; background: #ffffff; text-decoration: none; }

.btn-default { color: #000000; background: #f9f9f9; border: 1px solid #c6c6c6; background: -webkit-linear-gradient(#f9f9f9, #efefef); background: -moz-linear-gradient(#f9f9f9, #efefef); background: linear-gradient(#f9f9f9, #efefef); }

.btn-default:hover { color: #000000; background: #f9f9f9; }

.btn-red { color: #ffffff; background: #e54028; border: 1px solid #d22910; background: -webkit-linear-gradient(#e54028, #dd361d); background: -moz-linear-gradient(#e54028, #dd361d); background: linear-gradient(#e54028, #dd361d); }

.btn-red:hover { color: #ffffff; background: #e54028; }

.btn-green { color: #ffffff; background: #94cd16; border: 1px solid #7db500; background: -webkit-linear-gradient(#94cd16, #85bd09); background: -moz-linear-gradient(#94cd16, #85bd09); background: linear-gradient(#94cd16, #85bd09); }

.btn-green:hover { color: #ffffff; background: #94cd16; }

.btn-blue { color: #ffffff; background: #418dff; border: 1px solid #1c77f2; background: -webkit-linear-gradient(#418dff, #3c85f1); background: -moz-linear-gradient(#418dff, #3c85f1); background: linear-gradient(#418dff, #3c85f1); }

.btn-blue:hover { color: #ffffff; background: #418dff; }

.btn-orange { color: #ffffff; background: #f59d26; border: 1px solid #e28507; background: -webkit-linear-gradient(#f59d26, #ea9117); background: -moz-linear-gradient(#f59d26, #ea9117); background: linear-gradient(#f59d26, #ea9117); }

.btn-orange:hover { color: #ffffff; background: #f59d26; }

/** common
===================================*/
/** layout common
===================================*/
body img { width: 100%; height: auto; }

#page { background: #ffffff; }

#container { width: 100%; min-width: 320px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.section__header { font-weight: bold; line-height: 1.4; text-align: center; }
@media only screen and (min-width: 769px) { .section__header { font-size: 28px; font-size: 2.8rem; margin-bottom: 50px; } }
@media only screen and (max-width: 768px) { .section__header { font-size: 20px; font-size: 2rem; margin-bottom: 30px; } }
.section__header span { background: linear-gradient(transparent 60%, #fff44d 0%); }
@media only screen and (max-width: 768px) { .section__header br { display: none; } }

.section__lead { margin-bottom: 20px; }
@media only screen and (min-width: 769px) { .section__lead { font-size: 18px; font-size: 1.8rem; } }
@media only screen and (max-width: 768px) { .section__lead { font-size: 16px; font-size: 1.6rem; } }

.section__box .inner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 960px) { .section__box .inner { width: 100%; padding: 20px; } }
@media only screen and (min-width: 961px) { .section__box .inner { width: 960px; margin: 0 auto; padding: 60px; } }

.button { position: relative; display: block; color: #ffffff; background: #1f9899; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1; text-align: center; margin: 0 auto; font-size: 16px; font-size: 1.6rem; font-weight: normal; }
@media only screen and (max-width: 768px) { .button { padding: 15px; width: 100%; } }
@media only screen and (min-width: 769px) { .button { padding: 20px; width: 40%; } }
.button:after { position: absolute; top: 50%; right: 10px; content: ""; width: 10px; height: 10px; border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; -moz-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -o-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -ms-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -webkit-transform: rotateZ(-45deg) translate3d(0, -50%, 0); transform: rotateZ(-45deg) translate3d(0, -50%, 0); }

.panel { position: relative; font-size: 11px; font-size: 1.1rem; z-index: 1000; font-weight: bold; position: absolute; left: 50%; bottom: -10px; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
@media only screen and (max-width: 480px) { .panel { bottom: -65px; } }
.panel a { cursor: pointer; text-decoration: none; position: relative; display: table-cell; vertical-align: middle; line-height: 1; background: #ec3356; color: #ffffff; text-align: center; width: 130px; height: 130px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; }
.panel a span { display: block; padding: 5px 0 0 0; font-size: 17px; font-size: 1.7rem; }
.panel a:after { position: absolute; left: 50%; bottom: 25px; content: ""; width: 12px; height: 12px; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; -moz-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -o-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -ms-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -webkit-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); transform: rotateZ(-45deg) translate3d(-50%, 0, 0); }

.setsumeikai { width: 100%; position: relative; font-size: 11px; font-size: 1.1rem; z-index: 1000; font-weight: bold; position: absolute; left: 0; text-align: center; }
@media only screen and (max-width: 768px) { .setsumeikai { bottom: 10px; }
  .setsumeikai img { width: 70%; } }
@media only screen and (max-width: 640px) { .setsumeikai { bottom: 35px; }
  .setsumeikai img { width: 75%; } }
@media only screen and (max-width: 480px) { .setsumeikai { bottom: 5px; }
  .setsumeikai img { width: 65%; } }
@media only screen and (max-width: 410px) { .setsumeikai { bottom: 15px; }
  .setsumeikai img { width: 80%; } }
@media only screen and (min-width: 769px) { .setsumeikai { bottom: 45px; }
  .setsumeikai img { width: 490px; } }
.setsumeikai a { display: inline-block; }

/** global header
===================================*/
#global__header { position: relative; }
#global__header:before { content: " "; display: inline-block; width: 100%; background: url("../images/key.jpg") center top no-repeat; background-size: cover; vertical-align: middle; }
@media only screen and (max-width: 768px) { #global__header:before { height: 400px; } }
@media only screen and (max-width: 480px) { #global__header:before { height: 250px; } }
@media only screen and (min-width: 769px) { #global__header:before { height: 550px; } }
#global__header .logo { position: absolute; left: 0; top: 0; width: 100%; text-align: center; }
@media only screen and (max-width: 768px) { #global__header .logo { padding-top: 142px; }
  #global__header .logo img { width: 75%; } }
@media only screen and (max-width: 480px) { #global__header .logo { padding-top: 82px; }
  #global__header .logo img { width: 85%; } }
@media only screen and (min-width: 769px) { #global__header .logo { padding-top: 192px; }
  #global__header .logo img { width: 663px; } }

/** global footer 
===================================*/
#global__footer { padding: 20px 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 481px) { #global__footer { background: url("../images/footer_plate.jpg") center top no-repeat; min-height: 321px; padding: 95px 0 0 0; } }
#global__footer h2 { font-weight: bold; }
#global__footer address { margin-bottom: 1em; }

/** youtube
===================================*/
.youtube { position: relative; width: 100%; padding-top: 56.25%; }

.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

#introduction { min-height: 630px; background: url("../images/yama.jpg") center bottom no-repeat; }
#introduction .section__header { margin: 0 auto 25px auto; }
@media only screen and (min-width: 481px) { #introduction .section__header { width: 213px; } }
@media only screen and (max-width: 480px) { #introduction .section__header { width: 85%; } }
#introduction .inner { position: relative; }
@media only screen and (max-width: 480px) { #introduction .inner { padding-top: 120px; } }
@media only screen and (min-width: 481px) { #introduction .inner { padding-top: 50px; } }
#introduction .snswidget { position: absolute; right: 0; top: 0; display: table; }
@media only screen and (max-width: 480px) { #introduction .snswidget { padding: 75px 0 0 0; } }
@media only screen and (min-width: 481px) { #introduction .snswidget { padding: 25px 0 0 0; } }
#introduction .snswidget .widget { display: table-cell; padding: 0 5px; vertical-align: top; }
#introduction .section__sub__header { font-weight: bold; margin-bottom: 12px; text-align: center; }
@media only screen and (max-width: 480px) { #introduction .section__sub__header { font-size: 20px; font-size: 2rem; } }
@media only screen and (min-width: 481px) { #introduction .section__sub__header { font-size: 25px; font-size: 2.5rem; } }
#introduction .detail { font-weight: bold; text-align: center; margin-bottom: 25px; }
@media only screen and (max-width: 480px) { #introduction .detail { font-size: 16px; font-size: 1.6rem; } }
@media only screen and (min-width: 481px) { #introduction .detail { font-size: 18px; font-size: 1.8rem; } }

#chance { position: relative; }
#chance .section__header { margin-bottom: 40px; }
#chance .inner { position: relative; }
@media only screen and (max-width: 768px) { #chance .inner { padding-top: 65px; } }
@media only screen and (max-width: 480px) { #chance .inner { padding-top: 35px; } }
@media only screen and (min-width: 769px) { #chance .inner { padding-top: 85px; } }
@media only screen and (min-width: 961px) { #chance:before { z-index: 0; position: absolute; content: ""; left: 0; bottom: 0; min-height: 550px; background: url("../images/triangle_left.png") right bottom no-repeat; } }
@media only screen and (min-width: 961px) and (max-width: 960px) { #chance:before { width: 10%; } }
@media only screen and (min-width: 961px) and (min-width: 961px) { #chance:before { width: 15%; } }
@media only screen and (min-width: 961px) { #chance:after { z-index: 0; position: absolute; content: ""; right: 0; top: 0; min-height: 550px; background: url("../images/triangle_right.png") left top no-repeat; } }
@media only screen and (min-width: 961px) and (max-width: 960px) { #chance:after { width: 10%; } }
@media only screen and (min-width: 961px) and (min-width: 961px) { #chance:after { width: 15%; } }

#chance .reasons { width: 100%; text-align: center; }
@media only screen and (max-width: 480px) { #chance .reasons { margin-bottom: 20px; } }
@media only screen and (min-width: 481px) { #chance .reasons { z-index: 100; position: absolute; left: 0; top: -80px; } }
#chance .reasons ul { display: inline-block; width: 100%; }
@media only screen and (min-width: 769px) { #chance .reasons ul { width: 750px; } }
#chance .reasons ul li { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 480px) { #chance .reasons ul li { margin-bottom: 15px; } }
@media only screen and (min-width: 481px) { #chance .reasons ul li { width: 33%; float: left; } }
@media only screen and (max-width: 480px) { #chance .reasons ul li { margin-bottom: 15px; } }
#chance .reasons ul li .wrap1 { position: relative; display: table; width: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 3px solid #ffffff; background: #ffe553; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 480px) { #chance .reasons ul li .wrap1 { padding: 10px; } }
#chance .reasons ul li .wrap1:after { position: absolute; left: 50%; bottom: -4px; content: ""; width: 12px; height: 12px; background: #ffe553; border-bottom: 3px solid #ffffff; border-left: 3px solid #ffffff; -moz-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -o-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -ms-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -webkit-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); transform: rotateZ(-45deg) translate3d(-50%, 0, 0); }
#chance .reasons ul li .wrap1 .wrap2 { margin: 0 auto; padding: 15px 10px; display: table-cell; vertical-align: middle; font-weight: bold; text-align: center; }
@media only screen and (max-width: 560px) { #chance .reasons ul li .wrap1 .wrap2 { font-size: 14px; font-size: 1.4rem; }
  #chance .reasons ul li .wrap1 .wrap2 br { display: none; } }
@media only screen and (min-width: 769px) { #chance .reasons ul li .wrap1 .wrap2 { font-size: 18px; font-size: 1.8rem; } }

#support { position: relative; background: #2294a5; color: #ffffff; }
#support .support__box { margin-bottom: 15px; }
@media only screen and (min-width: 481px) { #support .support__box { display: table; table-layout: fixed; } }
@media only screen and (max-width: 480px) { #support .support__box .box { margin-bottom: 15px; } }
@media only screen and (min-width: 481px) { #support .support__box .box { display: table-cell; width: 33%; padding: 0 10px; } }
#support .support__box .box .photo { background: #ffffff; margin-bottom: 10px; }
#support .support__box .box .title { text-align: center; font-size: 15px; font-size: 1.5rem; margin-bottom: 5px; }
#support .support__box .box .desc { font-size: 14px; font-size: 1.4rem; }
#support .support__box .box ul { font-size: 12px; font-size: 1.2rem; }
#support .note { font-size: 12px; font-size: 1.2rem; }

#coworker { position: relative; }
@media only screen and (min-width: 481px) { #coworker { background: url("../images/coworkers_bg.png") center bottom no-repeat; } }
#coworker .box { font-size: 14px; font-size: 1.4rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 480px) { #coworker .box { padding-top: 70px; } }
@media only screen and (min-width: 481px) { #coworker .box { padding-left: 110px; } }
#coworker .box .title { font-weight: bold; }
#coworker .box ul li { list-style: disc inside; }
#coworker .box.box1 { background-image: url("../images/coworkers_icon1.png"); background-repeat: no-repeat; background-size: 90px; margin-bottom: 25px; }
@media only screen and (max-width: 480px) { #coworker .box.box1 { background-position: center top; } }
@media only screen and (min-width: 481px) { #coworker .box.box1 { background-position: left top; } }
#coworker .box.box2 { background-image: url("../images/coworkers_icon2.png"); background-repeat: no-repeat; background-size: 90px; }
@media only screen and (max-width: 480px) { #coworker .box.box2 { background-position: center top; } }
@media only screen and (min-width: 481px) { #coworker .box.box2 { background-position: left top; } }

@media only screen and (max-width: 640px) { #place { background: #e9f1f2 url("../images/map_sp.png") center top no-repeat; } }
@media only screen and (min-width: 641px) { #place { background: #e9f1f2 url("../images/map.png") center top no-repeat; } }
@media only screen and (max-width: 960px) { #place .wrap { min-height: 595px; } }
@media only screen and (min-width: 961px) { #place .wrap { min-height: 555px; } }
@media only screen and (max-width: 640px) { #place .inner { padding-bottom: 30px; } }
@media only screen and (min-width: 641px) { #place .inner { padding-bottom: 40px; } }
#place .section__lead { margin-bottom: 0px; }
#place .note { margin-bottom: 20px; font-size: 12px; font-size: 1.2rem; }
@media only screen and (max-width: 640px) { #place .area__box { padding-top: 430px; margin-bottom: 30px; } }
#place .area__box .title { font-size: 14px; font-size: 1.4rem; font-weight: bold; margin-bottom: 3px; color: #3890ae; }
#place .area__box .list { margin-bottom: 5px; }
#place .area__box .list li { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 6px; }
@media only screen and (max-width: 640px) { #place .area__box .list li { width: 50%; } }
@media only screen and (min-width: 641px) { #place .area__box .list li { width: 140px; } }
#place .area__box .list li:nth-child(2n) { padding-left: 3px; }
#place .area__box .list li:nth-child(2n+1) { padding-right: 3px; clear: both; }
#place .area__box .list li a { display: block; background: #3890ae; color: #ffffff; padding: 10px; text-align: center; }
#place .image__box { display: block; table-layout: fixed; font-size: 14px; font-size: 1.4rem; }
#place .image__box li { display: table-cell; text-align: center; }
#place .image__box li span { padding-top: 3px; display: block; }
@media only screen and (max-width: 480px) { #place .image__box li:nth-child(1) { padding-right: 12px; }
  #place .image__box li:nth-child(2) { padding-left: 6px; padding-right: 6px; }
  #place .image__box li:nth-child(3) { padding-left: 12px; } }
@media only screen and (min-width: 481px) { #place .image__box li:nth-child(1) { padding-right: 24px; }
  #place .image__box li:nth-child(2) { padding-left: 12px; padding-right: 12px; }
  #place .image__box li:nth-child(3) { padding-left: 24px; } }

#help .section__sub__header { font-size: 20px; font-size: 2rem; margin-bottom: 30px; font-weight: bold; text-align: center; }
#help .youtube { margin-bottom: 35px; }
#help .member__box { margin-bottom: 35px; }
@media only screen and (min-width: 481px) { #help .member__box { display: table; table-layout: fixed; } }
@media only screen and (max-width: 480px) { #help .member__box .box { margin-bottom: 25px; } }
@media only screen and (min-width: 481px) { #help .member__box .box { display: table-cell; width: 33%; }
  #help .member__box .box:nth-child(1) { padding-right: 26px; }
  #help .member__box .box:nth-child(2) { padding-left: 13px; padding-right: 13px; }
  #help .member__box .box:nth-child(3) { padding-left: 26px; } }
#help .member__box .box .photo { margin-bottom: 15px; }
#help .member__box .box dl { font-size: 14px; font-size: 1.4rem; }
#help .member__box .box dl dt { font-weight: bold; margin-bottom: 10px; line-height: 1; }
#help .movie { margin-bottom: 25px; }
#help .interview { margin: 0 auto; line-height: 1; }
@media only screen and (min-width: 481px) { #help .interview { width: 40%; } }
#help .interview a { display: block; padding: 14px; text-align: center; border: 2px solid #33bbd4; color: #33bbd4; }
#help .interview a:hover { background: #33bbd4; color: #ffffff; }

#recommend { background: #f9f7f1; }
#recommend .section__header span { background: none; display: inline-block; position: relative; }
@media only screen and (max-width: 480px) { #recommend .section__header span:before { position: absolute; left: -10px; top: 0px; content: ""; height: 40px; border-left: 3px solid #000000; -moz-transform: rotateZ(-20deg); -o-transform: rotateZ(-20deg); -ms-transform: rotateZ(-20deg); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
  #recommend .section__header span:after { position: absolute; right: -10px; top: 0px; content: ""; height: 40px; border-left: 3px solid #000000; -moz-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); } }
@media only screen and (min-width: 481px) { #recommend .section__header span:before { position: absolute; left: -15px; top: -5px; content: ""; height: 50px; border-left: 3px solid #000000; -moz-transform: rotateZ(-20deg); -o-transform: rotateZ(-20deg); -ms-transform: rotateZ(-20deg); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
  #recommend .section__header span:after { position: absolute; right: -25px; top: -5px; content: ""; height: 50px; border-left: 3px solid #000000; -moz-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); } }
#recommend .section__sub__header { font-size: 18px; font-size: 1.8rem; margin-bottom: 10px; font-weight: bold; }

#schedule { background: #f9f7f1; }
#schedule .inner { background: #ffffff; padding-bottom: 25px; }
#schedule .section__header { position: relative; background: #ec3356; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; color: #ffffff; padding: 15px; margin-bottom: 35px; }
#schedule .section__header:after { position: absolute; left: 50%; bottom: -1px; content: ""; width: 20px; height: 20px; background: #ec3356; -moz-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -o-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -ms-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); -webkit-transform: rotateZ(-45deg) translate3d(-50%, 0, 0); transform: rotateZ(-45deg) translate3d(-50%, 0, 0); }
#schedule .section__lead { margin-bottom: 10px; }
#schedule .notice { margin-bottom: 5px; font-size: 12px; font-size: 1.2rem; }
#schedule .note { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; }
#schedule .schedule { border-bottom: 1px solid #33bbd4; }
@media only screen and (max-width: 640px) { #schedule .schedule { margin-bottom: 25px; } }
@media only screen and (min-width: 641px) { #schedule .schedule { margin-bottom: 45px; } }
#schedule .schedule .button { width: 100% !important; font-size: 14px; font-size: 1.4rem; }
@media only screen and (min-width: 641px) { #schedule .schedule dl { display: table; table-layout: auto; } }
@media only screen and (min-width: 641px) { #schedule .schedule dl dt { display: table-cell; vertical-align: middle; } }
@media only screen and (min-width: 641px) { #schedule .schedule dl dd { display: table-cell; vertical-align: middle; } }
#schedule .schedule .title { font-weight: bold; font-size: 16px; font-size: 1.6rem; background: #e9f1f2; line-height: 1; padding: 10px; margin-bottom: 10px; }
#schedule .schedule .summary { font-size: 14px; font-size: 1.4rem; margin-bottom: 5px; }
@media only screen and (max-width: 640px) { #schedule .schedule .summary dt { font-weight: bold; } }
@media only screen and (min-width: 641px) { #schedule .schedule .summary dt:after { content: "："; } }
#schedule .schedule .detail { width: 100%; border-top: 1px solid #33bbd4; }
#schedule .schedule .detail dt { font-size: 18px; font-size: 1.8rem; }
@media only screen and (max-width: 640px) { #schedule .schedule .detail dt { padding: 15px 0 0px 0; } }
@media only screen and (min-width: 641px) { #schedule .schedule .detail dt { padding: 15px 0 15px 20px; } }
#schedule .schedule .detail dt span { font-size: 14px; font-size: 1.4rem; }
#schedule .schedule .detail dt em { font-weight: bold; color: #ff0000; color: #ff0000; }
#schedule .schedule .detail dd { padding: 15px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 641px) { #schedule .schedule .detail dd { width: 300px; } }
@media only screen and (min-width: 769px) { #schedule .join__box { padding: 40px 0 60px 0; } }
@media only screen and (max-width: 768px) { #schedule .join__box { padding: 20px 25px 30px 25px; } }
#schedule .join__box .join { font-weight: bold; text-align: center; margin-bottom: 25px; }
@media only screen and (min-width: 769px) { #schedule .join__box .join { font-size: 28px; font-size: 2.8rem; } }
@media only screen and (max-width: 768px) { #schedule .join__box .join { font-size: 20px; font-size: 2rem; } }

#sns .section__lead { text-align: center; }
@media only screen and (min-width: 641px) { #sns .list { display: table; table-layout: fixed; } }
@media only screen and (max-width: 640px) { #sns .list li:not(:last-child) { margin-bottom: 15px; } }
@media only screen and (min-width: 641px) { #sns .list li { display: table-cell; width: 33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  #sns .list li:nth-child(1) { padding-right: 26px; }
  #sns .list li:nth-child(2) { padding-left: 13px; padding-right: 13px; }
  #sns .list li:nth-child(3) { padding-left: 26px; } }

/** tokidoki common
===================================*/
#tokidoki .section__header { line-height: 1.8; }
@media only screen and (min-width: 961px) { #tokidoki .section__box .inner { padding: 40px; } }

.tokidoki__button, .tokidoki__button--header { position: relative; display: block; color: #000000; background: #ffdf08; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1; text-align: center; margin: 0 auto; font-size: 16px; font-size: 1.6rem; font-weight: normal; }
@media only screen and (max-width: 768px) { .tokidoki__button, .tokidoki__button--header { padding: 15px; width: 100%; } }
@media only screen and (min-width: 769px) { .tokidoki__button, .tokidoki__button--header { padding: 20px; width: 40%; } }
.tokidoki__button:after, .tokidoki__button--header:after { position: absolute; top: 50%; right: 10px; content: ""; width: 10px; height: 10px; border-bottom: 1px solid #000000; border-right: 1px solid #000000; -moz-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -o-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -ms-transform: rotateZ(-45deg) translate3d(0, -50%, 0); -webkit-transform: rotateZ(-45deg) translate3d(0, -50%, 0); transform: rotateZ(-45deg) translate3d(0, -50%, 0); }

@media only screen and (max-width: 768px) { .tokidoki__button--header { padding: 15px; width: 80%; } }

/** tokidoki header
===================================*/
#tokidoki__header { position: relative; }
#tokidoki__header:before { content: " "; display: inline-block; width: 100%; background: url("../images/tokidoki/key.jpg") center center no-repeat; background-size: cover; vertical-align: middle; }
@media only screen and (max-width: 768px) { #tokidoki__header:before { height: 440px; } }
@media only screen and (max-width: 480px) { #tokidoki__header:before { height: 300px; } }
@media only screen and (min-width: 769px) { #tokidoki__header:before { height: 550px; } }
#tokidoki__header .inner { position: absolute; left: 0; top: 0; width: 100%; text-align: center; }
@media only screen and (max-width: 768px) { #tokidoki__header .inner .logo { margin-bottom: 40px; padding-top: 35px; }
  #tokidoki__header .inner .logo img { width: 70%; } }
@media only screen and (max-width: 480px) { #tokidoki__header .inner .logo { margin-bottom: 20px; padding-top: 25px; }
  #tokidoki__header .inner .logo img { width: 80%; } }
@media only screen and (min-width: 769px) { #tokidoki__header .inner .logo { margin-bottom: 40px; padding-top: 50px; }
  #tokidoki__header .inner .logo img { width: 531px; } }
#tokidoki__header .note { padding: 5px 0; text-align: right; color: #000000; }
@media only screen and (max-width: 960px) { #tokidoki__header .note { width: 100%; } }
@media only screen and (min-width: 961px) { #tokidoki__header .note { width: 960px; margin: 0 auto; } }
#tokidoki__header .note a { text-decoration: underline; color: #000000; }

#tokidoki__introduction { min-height: 630px; background: url('../images/../images/tokidoki/yama.jpg?1468574331') center top no-repeat; background-size: cover; }
#tokidoki__introduction .section__header { margin: 0 auto 25px auto; }
@media only screen and (max-width: 480px) { #tokidoki__introduction .section__header { width: 85%; } }
#tokidoki__introduction .section__lead { line-height: 2; }
#tokidoki__introduction .inner { position: relative; padding-top: 50px; }
#tokidoki__introduction .snswidget { padding: 15px 0 0 0; position: absolute; right: 0; top: 0; display: table; }
#tokidoki__introduction .snswidget .widget { display: table-cell; padding: 0 5px; vertical-align: top; }
#tokidoki__introduction .section__sub__header { font-weight: bold; margin-bottom: 12px; text-align: center; }
@media only screen and (max-width: 480px) { #tokidoki__introduction .section__sub__header { font-size: 20px; font-size: 2rem; } }
@media only screen and (min-width: 481px) { #tokidoki__introduction .section__sub__header { font-size: 25px; font-size: 2.5rem; } }
#tokidoki__introduction .detail { font-weight: bold; text-align: center; margin-bottom: 25px; }
@media only screen and (max-width: 480px) { #tokidoki__introduction .detail { font-size: 16px; font-size: 1.6rem; } }
@media only screen and (min-width: 481px) { #tokidoki__introduction .detail { font-size: 18px; font-size: 1.8rem; } }

/** tokidoki support 
===================================*/
#tokidoki__support { position: relative; background: #2294a5; color: #ffffff; }
#tokidoki__support .section__header em { font-size: 50px; font-size: 5rem; display: block; padding: 10px; }
#tokidoki__support .support__box { margin-bottom: 15px; }
@media only screen and (min-width: 769px) { #tokidoki__support .support__box { display: table; table-layout: fixed; } }
#tokidoki__support .support__box .box { position: relative; vertical-align: top; }
@media only screen and (max-width: 768px) { #tokidoki__support .support__box .box { margin-bottom: 15px; } }
@media only screen and (min-width: 769px) { #tokidoki__support .support__box .box { display: table-cell; width: 33%; padding: 0 13px; }
  #tokidoki__support .support__box .box:first-child { padding-left: 0px; padding-right: 26px; }
  #tokidoki__support .support__box .box:last-child { padding-left: 26px; padding-right: 0px; } }
@media only screen and (max-width: 768px) { #tokidoki__support .support__box .box:not(:last-child) { margin-bottom: 50px; }
  #tokidoki__support .support__box .box:not(:last-child):after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 0; height: 0; border-top: 15px solid #fff44d; border-right: 15px solid transparent; border-left: 15px solid transparent; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }
#tokidoki__support .support__box .box .photo { position: relative; background: #ffffff; margin-bottom: 10px; }
@media only screen and (min-width: 769px) { #tokidoki__support .support__box .box .photo--arrow:after { content: ""; position: absolute; right: -30px; top: 50%; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #fff44d; -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } }
#tokidoki__support .support__box .box .title { text-align: center; font-size: 15px; font-size: 1.5rem; margin-bottom: 5px; font-weight: bold; }
#tokidoki__support .support__box .box .desc { font-size: 14px; font-size: 1.4rem; }
#tokidoki__support .support__box .box ul { font-size: 12px; font-size: 1.2rem; }
#tokidoki__support .note { font-size: 12px; font-size: 1.2rem; }

/** tokidoki plan
===================================*/
#tokidoki__plan { background: url('../images/../images/tokidoki/bg_paper.png?1468569854') left top repeat; }
#tokidoki__plan .plan__box { width: 100%; }
#tokidoki__plan .plan__box .plan { margin-bottom: 25px; }
#tokidoki__plan .plan__box .plan .time { font-size: 16px; font-size: 1.6rem; color: #7a7a7a; font-weight: bold; }
#tokidoki__plan .plan__box .plan .title { font-size: 24px; font-size: 2.4rem; margin-bottom: 5px; color: #2294a5; font-weight: bold; }
@media only screen and (max-width: 768px) { #tokidoki__plan .plan__box .plan .title br { display: none; } }
#tokidoki__plan .plan__box .plan .desc { font-size: 14px; font-size: 1.4rem; }
@media only screen and (max-width: 768px) { #tokidoki__plan .plan__box .plan .desc br { display: none; } }
#tokidoki__plan .plan__box .plan .photo { margin-bottom: 5px; }
#tokidoki__plan .plan__box .plan .ref { font-size: 11px; font-size: 1.1rem; }
#tokidoki__plan .plan__box .plan .ref a { color: #ffffff; text-decoration: underline; color: #000000; }
@media only screen and (max-width: 768px) { #tokidoki__plan .plan__box .plan--desc { margin-bottom: 10px; } }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .leftbox { float: left; } }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .leftbox { min-height: 280px; } }
#tokidoki__plan .plan__box .leftbox .ref { text-align: left; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .rightbox { float: right; } }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .rightbox { min-height: 280px; } }
#tokidoki__plan .plan__box .rightbox .ref { text-align: right; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .size--small { width: 43.37%; } }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .size--large { width: 51.81%; } }
#tokidoki__plan .plan__box .plan1 { position: relative; padding-bottom: 106px; }
#tokidoki__plan .plan__box .plan1 .rightbox { position: relative; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .plan1 .rightbox:before { position: absolute; right: 75%; bottom: 35px; content: ""; display: block; width: 83px; height: 83px; background: url('../images/../images/tokidoki/clock.png?1468578487') center top no-repeat; background-size: 83px; } }
#tokidoki__plan .plan__box .plan1:before { position: absolute; left: 50%; bottom: -10px; content: ""; display: block; width: 307px; height: 96px; background: url('../images/../images/tokidoki/work1.png?1468489369') center top no-repeat; background-size: 307px; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
#tokidoki__plan .plan__box .plan3 { position: relative; padding-bottom: 106px; }
#tokidoki__plan .plan__box .plan3 .leftbox { position: relative; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .plan3 .leftbox:before { position: absolute; left: 30%; bottom: -70px; content: ""; display: block; width: 129px; height: 107px; background: url('../images/../images/tokidoki/pc.png?1468480890') center top no-repeat; background-size: 129px; } }
#tokidoki__plan .plan__box .plan3:before { position: absolute; left: 50%; bottom: -10px; content: ""; display: block; width: 307px; height: 96px; background: url('../images/../images/tokidoki/work2.png?1468480882') center top no-repeat; background-size: 307px; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
#tokidoki__plan .plan__box .plan4 { position: relative; padding-bottom: 106px; }
#tokidoki__plan .plan__box .plan4 .rightbox { position: relative; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .plan4 .rightbox:before { position: absolute; right: 10%; bottom: -30px; content: ""; display: block; width: 105px; height: 82px; background: url('../images/../images/tokidoki/glass.png?1468480873') center top no-repeat; background-size: 105px; } }
#tokidoki__plan .plan__box .plan4:before { position: absolute; left: 50%; bottom: -10px; content: ""; display: block; width: 307px; height: 96px; background: url('../images/../images/tokidoki/work3.png?1468480868') center top no-repeat; background-size: 307px; -moz-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
#tokidoki__plan .plan__box .plan5 { position: relative; }
#tokidoki__plan .plan__box .plan5 .leftbox { position: relative; }
@media only screen and (min-width: 769px) { #tokidoki__plan .plan__box .plan5 .leftbox:before { position: absolute; right: 0; top: -40px; content: ""; display: block; width: 69px; height: 134px; background: url('../images/../images/tokidoki/tree.png?1468480861') center top no-repeat; background-size: 69px; } }

/** tokidoki office
===================================*/
#tokidoki__office { background: #f9f7f1; margin-bottom: 40px; }
@media only screen and (min-width: 769px) { #tokidoki__office .section__lead { padding-right: 160px; } }
#tokidoki__office .section__box .inner { padding-bottom: 0px; }
#tokidoki__office .inner { position: relative; }
@media only screen and (max-width: 768px) { #tokidoki__office .inner .map { text-align: center; padding: 5px 0 25px 0; }
  #tokidoki__office .inner .map img { width: 40%; } }
@media only screen and (min-width: 769px) { #tokidoki__office .inner .map { position: absolute; right: 10px; top: -35px; width: 134px; height: 215px; } }
@media only screen and (max-width: 768px) { #tokidoki__office .photo__box .box { margin-bottom: 15px; } }
@media only screen and (min-width: 769px) { #tokidoki__office .photo__box .box { width: 30%; float: left; margin-bottom: 24px; }
  #tokidoki__office .photo__box .box:nth-child(3n+1) { padding-right: 16px; }
  #tokidoki__office .photo__box .box:nth-child(3n+2) { padding-left: 8px; padding-right: 8px; }
  #tokidoki__office .photo__box .box:nth-child(3n) { padding-left: 16px; } }

/** tokidoki oubo
===================================*/
#tokidoki__coworker { position: relative; }
@media only screen and (min-width: 481px) { #tokidoki__coworker { background: url("../images/coworkers_bg.png") center bottom no-repeat; } }
#tokidoki__coworker .box { font-size: 14px; font-size: 1.4rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 480px) { #tokidoki__coworker .box { padding-top: 70px; } }
@media only screen and (min-width: 481px) { #tokidoki__coworker .box { padding-left: 110px; } }
#tokidoki__coworker .box .title { font-weight: bold; }
#tokidoki__coworker .box ul li { list-style: disc inside; }
#tokidoki__coworker .box.box1 { background-image: url("../images/coworkers_icon1.png"); background-repeat: no-repeat; background-size: 90px; margin-bottom: 25px; }
@media only screen and (max-width: 480px) { #tokidoki__coworker .box.box1 { background-position: center top; } }
@media only screen and (min-width: 481px) { #tokidoki__coworker .box.box1 { background-position: left top; } }
#tokidoki__coworker .box.box2 { background-image: url("../images/coworkers_icon2.png"); background-repeat: no-repeat; background-size: 90px; margin-bottom: 25px; }
@media only screen and (max-width: 480px) { #tokidoki__coworker .box.box2 { background-position: center top; } }
@media only screen and (min-width: 481px) { #tokidoki__coworker .box.box2 { background-position: left top; } }
#tokidoki__coworker .box.box3 { padding-top: 0px; }

/** tokidoki oubo
===================================*/
@media only screen and (max-width: 768px) { #tokidoki__oubo .join__box { padding: 20px 25px 30px 25px; } }
#tokidoki__oubo .join__box .join { font-weight: bold; text-align: center; margin-bottom: 25px; }
@media only screen and (min-width: 769px) { #tokidoki__oubo .join__box .join { font-size: 28px; font-size: 2.8rem; } }
@media only screen and (max-width: 768px) { #tokidoki__oubo .join__box .join { font-size: 20px; font-size: 2rem; } }