@charset "UTF-8";

/* html5,body,font-size(h1-h6 p li dt dd),table. basic style setting in normalize.css */


/*---------------------------------------------------------------------
 共通レイアウト（トップ・下層）
---------------------------------------------------------------------*/
body {position: relative}

a.btn {
	background: #01BFBD;
	border-radius: 30px;
	padding: 10px 50px;
	color: white;
	display: inline-block;
}
a.btn:hover {opacity: 0.7}

label.btn {
	background: #01BFBD;
	border-radius: 30px;
	padding: 10px 50px;
	color: white;
	display: inline-block;
  font-size: 1.6rem
}
label.btn:hover {opacity: 0.7}


/* sns ボタン */
.social_btn_wrap {width: 100%; background: yellow; padding: 5px 0 9px}
.social_btn {margin: 10px 0 0 0; width:250px ;margin-right:auto; margin-left:auto;}
.social_btn .facebook {float: left; margin: 0 15px 0 0; padding: 0px; display: inline; width: 150px;}
.social_btn .twitter  {float: left; margin: 0 5px 0 5px; padding: 0px; display: inline; width: auto;}



/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
header {position: absolute; top: 20px; left: 40px; z-index: 100}
header #menu li {margin-bottom: 2px}
header #menu li a {font-family: "sofia-pro",sans-serif; font-style: normal; font-weight: 400;}
header #menu li a:hover {text-decoration: underline}


/* トップ */
.top {
  background-image: url(../img/bg_top.jpg);
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
  position: relative  
}
.top #title_logo {position: absolute; top: 30%; width: 100%; text-align: center;}
.top #fb {position: absolute; top: 2%; right: 2%}
.top #arrow {position: absolute; bottom: 2%; width: 100%; text-align: center;}


.section h2 {font-family: "sofia-pro"; font-weight: bold; letter-spacing: 0.16em; margin-bottom: 10px; text-align: center}
.section h3 {font-size: 1.8rem; font-weight: bold; margin-bottom: 20px; text-align: center}


/* コンセプト */
.concept {
  background-image: url(../img/bg_concept.jpg);
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
}
.concept .row {max-width: 960px; padding: 20px; background: rgba(255, 255, 255, 0.9)}
.concept .row dl {margin-bottom: 40px}
.concept .row dt {border-bottom: 1px solid black; margin-bottom: 12px; padding-bottom: 3px}
.concept .row dd.explain {text-align: justify; margin-bottom: 20px; font-size: 1.2rem; line-height: 1.8}


/* ビジネスモデル */
.business_model {
  background-image: url(../img/bg_business_model.png);
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #F2F2F2;
}

.business_model .inner p {text-align: justify;}


/* 事例 */
.example {
  background-image: url(../img/bg_example.jpg);
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
}

.example .row {max-width: 540px; padding: 20px; background: rgba(255, 255, 255, 0.9)}
.example dd {text-align: left; margin-top: 10px}


/* ケース */
.case {background: #F2F2F2; position: relative}
.case ul.headlines {position: absolute; top: 3%; width: 100%; text-align: center; z-index: 100}
.case .row {max-width: 100%}
.case #nakagawa {
  background-image: url(../img/bg_nakagawa.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh;
}

.case #anrealage {
  background-image: url(../img/bg_anrealage.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh
}

.case #spingle_move {
  background-image: url(../img/bg_spingle_move.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh
}

.case .case_wrap h4 {margin-top: 150px; font-weight: bold; margin-bottom: 30px;text-align: center}
.case .case_wrap .lead {background: rgba(255, 255, 255, 0.8); padding: 20px; text-align: left; margin: 30px}
.case .case_wrap .more {position: absolute; bottom: 15%; width: 100%; text-align: center;}

.case .btn {font-family: "sofia-pro",sans-serif; font-style: italic; font-weight: 200; font-size: 2.3rem}
.case #nakagawa .btn {background: #0080FF}
.case #anrealage .btn {background: #FF9900}
.case #spingle_move .btn {background: #FF4D4D}




#nakagawa_wrap{background: white; padding: 40px; max-width: 960px; margin-right:auto; margin-left:auto;}
#anrealage_wrap{background: white; padding: 40px; max-width: 960px; margin-right:auto; margin-left:auto;}
#spingle_move_wrap{background: white; padding: 40px; max-width: 960px; margin-right:auto; margin-left:auto;}
.case_inline_wrap {position: relative}
.case_inline_wrap h1 {text-align: center; font-family: "sofia-pro",sans-serif; font-weight: 700}
.case_inline_wrap h2 {text-align: center; font-weight: bold; font-size: 1.6rem; margin-bottom: 20px}
.case_inline_wrap .explain {margin-bottom: 10px;}
.case_inline_wrap .explain p {font-size: 1.4rem}
.case_inline_wrap .figure {margin-bottom: 0}
.case_inline_wrap li {font-size: 1.2rem; line-height: 1.4; margin-bottom: 15px}
.case_inline_wrap li img {margin-bottom: 8px}
.popup-modal-dismiss {position: absolute; top: -50px; right: -30px;}
.popup-modal-dismiss a {font-size: 3rem; display: none}





/* コンタクト */
.contact {
  background-image: url(../img/bg_contact.jpg);
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
}
.contact .row {max-width: 1040px}
.contact .inner {padding: 20px}
.contact #form dl {clear: both; margin-bottom: 10px}

.contact #form dt {font-weight: normal; font-size: 1.3rem; text-align: left}
.contact #form dt span {
	color: white;
	background: red;
	border-radius: 5px;
	font-size: 1.1rem;
	padding: 2px 5px;
	display: inline;
	margin-left: 5px
}
.mail a {pointer-events:none;}
.contact #form dd input {font-size: 1.4rem; padding: 5px 5px; height: 1.8em}

.contact #summary dt {border-bottom: 1px solid black; margin-bottom: 8px; font-size: 1.3rem}
.contact #summary dd {font-size: 1.3rem}
.contact #form input[type="submit"] {
    background: #01BFBD;
    border-radius: 30px;
    padding: 10px 50px;
    color: white;
    display: inline-block;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    border: none;
}
.contact #form input[type="submit"]:hover {background: #03A9F4;}


/*---------------------------------------------------------------------
 下層ページ
---------------------------------------------------------------------*/
.under .current a {text-decoration: underline}
.under .main {padding: 50px 10px; 30px}
.under h2 {font-family: "sofia-pro"; font-weight: bold; letter-spacing: 0.16em; margin-bottom: 10px; text-align: center}
.under h3 {font-size: 1.8rem; font-weight: bold; margin-bottom: 20px; text-align: center}
.under .inner {text-align: left;}


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer small {position: absolute; bottom: 1%; left: 1%;; color: #fff; z-index: 100; font-family: "sofia-pro",sans-serif; font-style: italic; font-weight: 200; font-size: 1.2rem}



/*---------------------------------------------------------------------
 サンクスページ
---------------------------------------------------------------------*/
#thanks {
  background-image: url(../img/bg_thanks.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 100vh
}

#thanks .inner {background: white;margin-top: 10%; padding: 40px}



/*---------------------------------------------------------------------
 モーダル（only CSS インライン表示）
---------------------------------------------------------------------*/
.contribute {
  position: fixed;
  right: -20px;
  top: 20px;
  width: 16em;
  height: 10em;
  overflow: hidden;
  transform: rotate(45deg);
}
.contribute p {padding: 3px; background-color: #444444;}
.contribute p a {
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  display: block;
  color: white;
  text-decoration: none;
  padding: 2px 0px;
}

@media (max-width: 500px){
.wrap {width: 100%;}
}

.modal .checkbox{display: none;}

/* Gray background */
.modal .modal-overlay{
  opacity: 0;
  transition: all 0.3s ease;
  width: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transform: scale(1);
  display: flex;
  background-color: rgba(0,0,0,0.7);
}

/* Box */
.modal .modal-wrap{
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  padding: 40px 50px;
  width: 60%;
  margin: 20px auto;
  align-self: flex-start;
  border-radius: 2px;
  transition: all 0.5s ease;
}
.modal .modal-wrap.small{width: 30%;}
.modal .modal-wrap.full{width: 100%; height: 100%;}
.modal .modal-wrap.a-center {align-self: center;}
.modal .modal-wrap.from-left {transform: translateX(-100%);}
.modal .modal-wrap.from-right {transform: translateX(100%);}
.modal .modal-wrap.from-top {transform: translateY(-100%);}
.modal .modal-wrap.from-bottom {transform: translateY(100%);}


/* Close button */
.modal .modal-overlay .close{position: absolute; right: 5px; top: -10px; font-size: 40px; width: 30px; height: 30px; color: #282c34;}
.modal .modal-overlay .close:hover{cursor: pointer; color: #4b5361;}
.modal .o-close {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -100;}
.modal input:checked ~ .o-close {z-index: 9998;}
.modal input:checked ~ .modal-overlay{transform: scale(1); opacity:1; z-index: 9997; overflow: auto;}
.modal input:checked ~ .modal-overlay .modal-wrap {transform: translateY(0); z-index: 9999;}

/* Responsive Design */
/* Tablet size */
@media (max-width: 800px){
.modal .modal-wrap {width: 80%;padding: 20px;}
}

/* Phone size */
@media (max-width: 500px){
.modal .modal-wrap {width: 90%;}
}



/*---------------------------------------------------------------------
 jquery 関連 css
---------------------------------------------------------------------*/

/* ===========================================================
 * pagepiling.js 1.5
 *
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 * 
 * jquery.pagepiling.css
 * ========================================================== */
html, body#top {
    overflow:hidden;
    margin:0;
    padding:0;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.pp-section {height:100%; position:absolute; width:100%;}
.pp-easing {
    -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}
#pp-nav {position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1;}
#pp-nav.right {right: 17px;}
#pp-nav.left {left: 17px;}
.pp-section.pp-table {display: table;}
.pp-tableCell {display: table-cell; vertical-align: middle; width: 100%; height: 100%;}
.pp-slidesNav {position: absolute; z-index: 4; left: 50%; opacity: 1;}
.pp-slidesNav.bottom {bottom: 17px;}
.pp-slidesNav.top {top: 17px;}

#pp-nav ul, .pp-slidesNav ul {margin: 0; padding: 0;}
#pp-nav li, .pp-slidesNav li {display: block; width: 14px; height: 13px; margin: 15px 7px ; position:relative;}
.pp-slidesNav li {display: inline-block;}
#pp-nav li a, .pp-slidesNav li a {display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none;}
#pp-nav li .active span, .pp-slidesNav .active span {background: #333;}
#pp-nav span,
.pp-slidesNav span {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.pp-tooltip {position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: "sofia-pro",sans-serif; font-style: normal; font-weight: 400; white-space: nowrap; max-width: 220px;}
.pp-tooltip.right {right: 20px;}
.pp-tooltip.left {left: 20px;}
.pp-scrollable {overflow-y: scroll; height: 100%;}



/* モーダル表示エフェクト
----------------------------------------------- */
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {opacity: 0.5;}
.mfp-fade.mfp-bg.mfp-removing {opacity: 0;}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {opacity: 1;}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {opacity: 0;}





/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/

 /* スマホ・タブレット共通対応 */
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px){
.no-br br {display: none}

}



 /* スマホ対応（共通） */
@media only screen and (min-device-width : 319px) and (max-device-width : 480px) {
.no-br-sp br {display: none}
footer small {font-size: 1rem}
.pagetop {display: none}
.top #title_logo img {max-width: 250px}
#pp-nav.right {right: 0}


.case .modal .modal-wrap {padding: 0}
.modal .modal-wrap .explain p {font-size: 1rem}
.modal .modal-wrap li {font-size: 0.8rem}
.case .case_wrap {margin-bottom: 0}
.case ul.headlines h2 {margin-bottom: 3px}
.case ul.headlines h3 {font-size: 1.3rem;}
.case .case_wrap .more {bottom: 35%;}
.case .btn {font-size: 1.3rem}

.case #nakagawa {
  background-image: url(../img/bg_nakagawa.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 30vh
}

.case #anrealage {
  background-image: url(../img/bg_anrealage.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 30vh
}

.case #spingle_move {
  background-image: url(../img/bg_spingle_move.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 30vh
}
.case .case_wrap h4 {background: rgba(255, 255, 255, 0.6);padding: 5px;margin-top: 140px}
table tr th, table tr td {padding: 0.5em;}

}

 /* スマホ「縦」向き対応 */
@media only screen and (min-device-width:320px) and (orientation:portrait) {
.business_model .inner .columns {margin-bottom: 5px}
.business_model p.sp {display: block !important}
.concept a.btn {padding: 9px 15px 7px; font-size: 1.3rem}
.case ul.headlines h3 {color: gray}

}


 /* スマホ「横」向き対応 */
@media only screen and (max-device-width:480px) and (orientation:landscape) {
.top #title_logo {position: absolute; top: 10%;}
.concept a.btn {font-size: 1.1rem}

}



 /* タブレット対応（共通） */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.no-br-tb br {display: none}

}

 /* タブレット「縦」対応 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}


 /* タブレット「横」対応 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.top #title_logo {position: absolute; top: 15%;}
.business_model .figure img {max-width: 640px}
}



 /* PCモニター（1024px以降） */
@media only screen and
(min-width : 1024px) {
#story .title_wrap {padding-right: 30px}
#contact #form {border-right: dotted 1px silver}
#brand_project .row {padding-left: 40px; padding-right: 40px}
.concept .row {padding: 50px;}
.example .row {padding: 50px;}
.business_model .inner p {padding: 0px 15px}
.business_model .row {padding-left: 100px; padding-right: 100px}
.contact .row {padding-left: 100px; padding-right: 100px}
}

/*---------------------------------------------------------------------
 IE11
---------------------------------------------------------------------*/



/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
a[href]:after {content: ""; }
}