img {width: 100%;height: auto;line-height: 1} .LP-Cnt {width: 100%;padding:10px 0; background: #2ab5d3;background: -webkit-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -o-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -moz-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -webkit-linear-gradient(135deg, #57cfb0, #2ab5d3); background: -o-linear-gradient(135deg, #57cfb0, #2ab5d3); background: linear-gradient(-45deg, #57cfb0, #2ab5d3);font-size: 14px; overflow:hidden; /*position:fixed; top:0;*/ z-index:1000;box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15);} header .LP-Cnt .logo {float:none;width: 170px;margin: 0 auto;display: block;} #LP {font-size: 18px;} #LP section {border: none;border-radius:0;box-shadow:0px 0px 0px 0px #fff; margin: 0;} #LP #heroVisual {background: #fff;} #LP #heroVisual .Cnt {min-width: 990px; max-width: 1180px;margin: 0 auto;} #LP #heroVisual h1 {text-align: center;line-height: 0;} #LP #heroVisual h1 img {line-height: 0;width: 100%;height: auto;} #LP #Intro {background:#EBEBEB; padding-top: 50px;} #LP #Intro .Cnt {width: 729px;margin: 0 auto; padding-bottom: 50px;} #LP #Intro .Cnt .catch {width: 729px; margin: 0 auto 30px;} #LP #Intro .Cnt p {} #LP .Btn {width: 483px; margin: 0 auto;} #LP .Btn.Hv:hover {opacity: 0.7;} #LP #Reason {background: #fff;} #LP h2 {background: url(../img/lp/bg-h2.png) repeat-x; height: 150px;box-sizing: border-box; text-align: center; padding-top: 23px;} #LP h2 span {width: 463px; padding-top: 15px;} #LP #Reason h2, #LP #Voice h2, #LP #Flow h2 {color: #fff;height: 150px;font-size: 30px;padding-top: 50px;} #LP #Reason .Cnt {width: 800px; margin: 0 auto; padding-bottom: 50px;} #LP #Reason h3 {width: 800px; margin: 0 auto 20px;border: none; padding: 0} #LP #Reason .block {width: 800px; overflow: hidden; margin: 0 auto 20px;} #LP #Reason .txt {float: left; width: 68%;} #LP #Reason .photo {float: right; width: 28%;} #LP #Reason .photo img {width: 100%; height: auto;} #LP #Voice {background: #fefefe;padding-bottom: 50px;} #LP #Voice .block {border: 1px solid #E7E7E7;padding: 15px 20px; width: 760px; margin: 0 auto 30px; background: #fff; overflow: hidden;} #LP #Voice .block h3 {text-align: center; padding: 0; margin: 0 auto 15px; color:#161616; border: none;font-size: 20px;} #LP #Voice .block .photo {float: left; width: 25%;} #LP #Voice .block .photo img {width: 100%; overflow: hidden; line-height: 0; border-radius: 5px;} #LP #Voice .block .photo .name {text-align: center; font-size: 12px;} #LP #Voice .block .txt { float: right; width: 70%} #LP #Flow {background: #fefefe;padding-bottom: 50px;} #LP #Flow .block {border: 3px solid #E7E7E7; border-radius: 8px; padding: 15px 20px; width: 760px; margin: 0 auto 20px;} #LP #Flow .block h3 {width: 169px; padding: 0; margin: 0 auto 15px; color:#161616; border: none;font-size: 20px;} #LP #Flow .block p {text-align: center;} #LP #Flow .arrow{width: 71px; margin: 0 auto 20px;} @media screen and (max-width: 800px) { header .LP-Cnt {width: 100%;padding:5px 0; } header .LP-Cnt .logo {float:none;width: 120px;margin: 0 auto;display: block;} #LP {font-size: 15px;} #LP section {border: none;border-radius:0;box-shadow:0px 0px 0px 0px #fff; margin: 0;} #LP img {width: 100%; height: auto; line-height: 0;} #LP #heroVisual {background: #fff;} #LP #heroVisual .Cnt {min-width: 100%; max-width: 100%;margin: 0 auto;} #LP #heroVisual h1 {line-height: 0;} #LP #heroVisual h1 img {line-height: 0;width: 100%;height: auto;} #LP h2 {background: url(../img/lp/bg-h2_sp.png) repeat-x; height: 110px; padding-top: 13px;} #LP h2 img {width: 90%; padding-top: 5px;} #LP #Intro {background:#EBEBEB; padding-top: 50px;} #LP #Intro .Cnt {width:96%;margin: 0 auto; padding-bottom: 30px;} #LP #Intro .Cnt .catch {width:100%; margin: 0 auto 30px;} #LP .Btn {width: 100%; margin: 0 auto;} #LP .Btn.Hv:hover {opacity: 0.7;} #LP #Reason {background: #fff;} #LP #Reason .Cnt {width:96%;margin: 0 auto; padding-bottom: 30px;} #LP #Reason h3 {width: 100%; margin: 0 auto 20px;border: none; padding: 0} #LP #Reason .block {width: 98%; overflow: hidden; margin: 0 auto 20px;} #LP #Reason .txt {float: none; width: 100%;} #LP #Reason .photo {float: none; width: 80%; margin: 0 auto;} #LP #Voice {background: #fefefe;padding-bottom: 30px;} #LP #Voice .block {border: 1px solid #E7E7E7;padding:2%; width:92%; margin: 0 auto 30px; background: #fff; overflow: hidden;} #LP #Voice .block h3 {text-align: center; padding: 0; margin: 0 auto 15px; color:#161616; border: none;font-size: 18px;} #LP #Voice .block .photo {float: none; width: 40%; margin: 0 auto;} #LP #Voice .block .photo .name {font-size: 11px;} #LP #Voice .block .txt {float: none; width: 100%; font-size: 14px;} #LP #Flow {background: #fefefe;padding-bottom: 50px;} #LP #Flow .Cnt {width:96%;margin: 0 auto; padding-bottom: 10px;} #LP #Flow .block {border: 3px solid #E7E7E7; padding:2%; width:92%; margin: 0 auto 15px;} #LP #Flow .block h3 {width: 169px; padding: 0; margin: 0 auto 10px;} #LP #Flow .block p {text-align: center; font-size: 14px;} #LP #Flow .arrow{width: 71px; margin: 0 auto 15px;} } /**** 有料会員LP ***/ #payingLP {width: 100%;background: #fff;font-family: 'Noto Sans JP', sans-serif;margin-bottom: 0} #payingLP .hero {background: url("../img/lp-payingmember/bg-hero.jpg") 50% 50% no-repeat;background-size: cover;width: 100%;margin: 0 auto;overflow: hidden;} #payingLP .hero .cnt {max-width:1200px;width: 90%; margin:0 auto;} #payingLP .hero h1 {text-align: center;color: #17aecf;font-size: 54px;padding: 200px 0;margin-bottom: 0} #payingLP .mTitle {color: #fff;text-align: center;padding:40px 10px;background-color: #4fb4e8;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;font-size: 36px;margin-bottom: 30px;font-weight: 600;box-sizing: border-box;width: 100%;} #payingLP .mTitle span {display: block;font-style: italic;} #payingLP .mTitle.small {font-size: 30px;} #payingLP .introduction {max-width: 900px;margin: 0 auto 40px;font-size: 18px;font-weight: 100;text-align: justify;padding: 0 2%;} #payingLP .function {max-width:1200px;margin:0 auto;} #payingLP .function li{overflow: hidden;margin-bottom: 60px;box-sizing: border-box;padding: 2%;} #payingLP .function li h2 {color: #004BA6; font-size: 1.5rem;font-weight: 600; line-height: 1.4em; padding: 10px 0 0;} #payingLP .function li h2 .petit {color: #000; font-size: 16px;font-weight: 500;} #payingLP .function li h2 .num {color: #000;font-family: "Pathway Gothic One", sans-serif; font-weight: normal; font-size: 100px; line-height: 1;} #payingLP .function li .funcLabel {width: 100%; margin: 0 0 20px 0;display: block;overflow: hidden;} #payingLP .function li .funcLabel img {width: 218px;float: left;} #payingLP .function li:nth-child(2n) .funcLabel img {float: right;} #payingLP .function li .txt {float: left; width: 40%;text-align: justify} #payingLP .function li figure {float: right; width: 58%;} #payingLP .function li .note {margin: 10px 0;line-height: 2em;font-weight: 400;} #payingLP .function li:nth-child(2n){background: #F3F3F3} #payingLP .function li:nth-child(2n) h2 {text-align: right;} #payingLP .function li:nth-child(2n) .txt {float: right;} #payingLP .function li:nth-child(2n) figure {float: left;} #payingLP .caseSec {max-width:1200px;margin:0 auto;} #payingLP .caseSec li{overflow: hidden;margin-bottom: 60px;box-sizing: border-box;padding: 2%;} #payingLP .caseSec li h2 {color: #004BA6; font-size: 1.5rem;font-weight: 600; line-height: 1.4em; padding: 10px 0 0;} #payingLP .caseSec li .txt {float: left; width: 57%;text-align: justify} #payingLP .caseSec li figure {float: right; width: 40%;} #payingLP .caseSec li .note {margin: 10px 0;line-height: 2em;font-weight: 400;} #payingLP .caseSec ul:nth-child(2n) li{background: #F3F3F3} #payingLP .caseSec ul:nth-child(2n) li h2 {text-align: right;} #payingLP .caseSec ul:nth-child(2n) li .txt {float: right;} #payingLP .caseSec ul:nth-child(2n) li figure {float: left;} @media screen and (max-width: 727px) { #payingLP {margin-top: 50px;} #payingLP .mTitle {padding:25px 10px;font-size: 20px;} #payingLP .mTitle.small {padding:30px 10px;font-size: 20px;} #payingLP .hero .cnt {max-width:90%;width: 90%; margin:0 auto;} #payingLP .introduction {max-width: 96%;margin: 0 auto 40px;font-size: 16px;} #payingLP .function {max-width:100%;} #payingLP .function li{width:100%;box-sizing: border-box;padding: 2%;margin-bottom: 30px;} #payingLP .function li h2 {font-size: 24px;line-height: 1.4em;text-align: left !important;} #payingLP .function li h2 .petit {font-size: 14px;} #payingLP .function li h2 .num {font-size: 50px;} #payingLP .function li .funcLabel img {width: 150px;float: left;} #payingLP .function li:nth-child(2n) .funcLabel img {float: left;} #payingLP .function li .txt, #payingLP .function li figure {float: none; width: 100%;} #payingLP .function li .note {font-size: 14px; margin: 5px 0;line-height: 1.8em;} #payingLP .caseSec {max-width:100%;} #payingLP .caseSec li{width:100%;box-sizing: border-box;padding: 2%;margin-bottom: 30px;} #payingLP .caseSec li h2 {font-size: 26px;line-height: 1.4em;text-align: left !important;} #payingLP .caseSec li h2 .petit {font-size: 14px;} #payingLP .caseSec li h2 .num {font-size: 50px;} #payingLP .caseSec li .funcLabel img {width: 150px;float: left;} #payingLP .caseSec li:nth-child(2n) .funcLabel img {float: left;} #payingLP .caseSec li .txt, #payingLP .caseSec li figure {float: none; width: 100%;} #payingLP .caseSec li .note {font-size: 14px; margin: 5px 0;line-height: 1.8em;} } /**** 感謝バッジLP ***/ #thankLP {width: 100%;background: #fff;font-family: 'Noto Sans JP', sans-serif;margin-bottom: 0} #thankLP .content {padding-bottom: 60px;} #thankLP .mTitle {color: #fff;text-align: center;padding:40px 10px;background-color: #4fb4e8;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;font-size: 36px;margin-bottom: 30px;font-weight: 600;box-sizing: border-box;width: 100%;} #thankLP .mTitle span {display: block;font-style: italic;} #thankLP .mTitle.small {font-size: 30px;} @media screen and (max-width: 727px) { #thankLP {margin-top: 50px;} #thankLP .mTitle {padding:20px 10px;font-size: 26px;} #thankLP .mTitle.small {padding:10px 20px;font-size: 22px;} #thankLP .hero .cnt {max-width:90%;width: 90%; margin:0 auto;} } #thankLP .introduction, #thankLP .hintSec {max-width: 900px;margin: 0 auto 40px;font-size: 18px;font-weight: 100;text-align: justify;padding: 0 2%;} #thankLP .introduction .Cnt, #thankLP .hintSec .Cnt {display: table;width: 100%;} #thankLP .introduction .Cnt figure{display: table-cell;width: 30%;vertical-align: top;position: relative;} #thankLP .introduction .Cnt .txt{display: table-cell;width: 70%;box-sizing: border-box;padding-left: 5%; vertical-align: top;} #thankLP .introduction .Cnt .grayBlock {font-size: 14px;} @media screen and (max-width: 727px) { #thankLP .introduction {max-width: 96%;margin: 0 auto 40px;font-size: 16px;} #thankLP .introduction .Cnt {display: block;width: 100%;font-size: 14px;} #thankLP .introduction .Cnt figure{display: block;width: 100%;box-sizing: border-box;padding: 0 35% 10px;position: relative;} #thankLP .introduction .Cnt .txt{display: block;width: 100%;;padding: 0;} #thankLP .introduction .Cnt .grayBlock {font-size: 13px;} } #thankLP .function {max-width:1200px;margin:0 auto;overflow: hidden;} #thankLP .function li{overflow: hidden;margin-bottom: 60px;box-sizing: border-box;padding: 2%;background: #F3F3F3} #thankLP .function li.frame {box-sizing: border-box;border: 3px solid #F0B930} #thankLP .function li h2 {color: #004BA6; font-size: 1.5rem;font-weight: 600; line-height: 1.4em; padding: 10px 0 0;} #thankLP .function li h2 .petit {color: #000; font-size: 16px;font-weight: 500;} #thankLP .function li h2 .yl {color: #F0B930;padding-right: 10px;font-size: 110%;} #thankLP .function li h2 .num { color: #F0B930;font-family: "Pathway Gothic One", sans-serif; font-weight: normal; font-size: 60px; line-height: 1;} #thankLP .function li:nth-child(2n) .funcLabel img {float: right;} #thankLP .function li .txt {float: left; width: 58%;text-align: justify} #thankLP .function li figure {float: right; width: 40%;} #thankLP .function li .note {margin: 10px 0;line-height: 2em;font-weight: 400;} #thankLP .function li .grayBlock {} #thankLP .function li .grayBlock h3 {border: none;text-align: center; color:#0cb2ba} #thankLP .function li .grayBlock li {margin: 0;position: relative;padding: 0 0 10px 15px;background: none!important} #thankLP .function li .grayBlock li:nth-child(2n) {background: none;} #thankLP .function li .grayBlock li:before {content: '・';top: 0;left: 0;position: absolute;} #thankLP .function li .grayBlock li:last-child {padding-bottom: 0} #thankLP .function li .photo, #thankLP .function li .photo img {width: 100%;height: auto;} #thankLP .grayBlock.howtoShare { width: 60%;margin: 0 auto 60px; border-radius: 12px;padding: 25px;} #thankLP .grayBlock.howtoShare h3 {border: none;text-align: center; color:#0cb2ba} #thankLP .grayBlock.howtoShare .semiPhoto {width: 60%;margin: 0 auto 2%;} #thankLP .prBlock {width: 65%; margin: 20px auto 60px; border-radius: 12px; padding: 10px; background: #FFE355; box-sizing: border-box; border: 6px solid #F7475D;} #thankLP .prBlock .box {width: 100%; margin: 0 auto; box-sizing: border-box; border: 6px solid #F7475D; border-radius: 12px; padding: 25px;} #thankLP .prBlock h3 {border: none;text-align: center; color:#F7475D;font-size: 160%} #thankLP .prBlock dl {display: table;width: 100%;margin-bottom: 10px;} #thankLP .prBlock dt {display: table-cell;vertical-align: middle;box-sizing: border-box;width: 80px;} #thankLP .prBlock dt span {font-weight: bold;background: #F7475D;color: #fff;border-radius: 4px;padding: 1px 4px 2px} #thankLP .prBlock dd {display: table-cell;vertical-align: middle;box-sizing: border-box;font-weight: bold;} #thankLP .txt-hide, #thankLP .txt-hide2, #thankLP .txt-hide3 {display: none;} #thankLP button.more, #thankLP button.more2, #thankLP button.more3{cursor: pointer;border-radius: 6px;font-weight: 700;width: 260px;margin: 20px auto;display: block;background-color:#17CFD8;color: #fff;padding:10px 15px;border: none;outline: 0;transition: .5s;-erbkit-transition: .5s;} #thankLP button.more::after{white-space: pre;content: "EXPERT会員（EX会員）について\A詳しく見る";transition: .2s;-erbkit-transition: .2s;} #thankLP button.more2::after{content: "チャットの使い方";transition: .2s;-erbkit-transition: .2s;} #thankLP button.more3::after{content: "EXPERT会員（EX会員）の注意点";transition: .2s;-erbkit-transition: .2s;} #thankLP button.more.on-click::after, #thankLP button.more2.on-click::after, #thankLP button.more3.on-click::after {content: "閉じる";} @media screen and (max-width: 727px) { #thankLP .function {max-width:1200px;margin:0 auto;} #thankLP .function {max-width:100%;} #thankLP .function li{width:100%;box-sizing: border-box;padding: 2%;margin-bottom: 30px;} #thankLP .function li h2 {font-size: 22px;line-height: 1.4em;text-align: left !important;} #thankLP .function li h2 .petit {font-size: 14px;} #thankLP .function li h2 .num {font-size: 50px;} #thankLP .function li .funcLabel img {width: 150px;float: left;} #thankLP .function li:nth-child(2n) .funcLabel img {float: left;} #thankLP .function li .txt {float: none; width: 100%;} #thankLP .function li figure {float: none; width: 70%;margin: 0 15% 5%} #thankLP .function li .note {font-size: 14px; margin: 5px 0;line-height: 1.8em;} #thankLP .grayBlock.howtoShare .semiPhoto {width: 80%;} #thankLP .prBlock { width: 96%;padding: 12px;background:#FFE355;border: 4px solid #F7475D;} #thankLP .prBlock h3 {border: none;text-align: center; color:#F7475D;font-size: 150%} #thankLP .prBlock .box {border: 4px solid #F7475D; padding: 10px;} #thankLP .grayBlock.howtoShare { width: 80%;margin: 0 auto 40px;;padding: 20px;font-size: 14px} } #thankLP .mokuji {width: 96%;background: #f7f7f7;border-radius: 10px; max-width:900px;box-sizing: border-box; padding: 25px 2%; margin:0 auto 6%;} #thankLP .mokuji li {position: relative;padding-left: 25px;font-weight: 700;font-size: 120%;margin-bottom: 2%;} #thankLP .mokuji li:last-child {margin-bottom: 0;} #thankLP .mokuji li::before {position: absolute;left: 0;} #thankLP .mokuji li:first-child:before {content: '1.'} #thankLP .mokuji li:nth-child(2n):before {content: '2.'} #thankLP .mokuji li:nth-child(3n):before {content: '3.'} #thankLP .mokuji li:nth-child(4n):before {content: '4.'} #thankLP .mokuji li:nth-child(5n):before {content: '5.'} #thankLP .mokuji li:nth-child(5n):before {content: '5.'} #thankLP .mokuji li a {font-weight: 700;text-decoration: underline;color: #000} @media screen and (max-width: 727px) { #thankLP .mokuji li {padding-left: 20px;font-size: 100%;} } #thankLP .hintSec h3 {border-left: none;font-size: 22px;position: relative;text-align: center; display: inline-block; padding: 0 55px;box-sizing: border-box;width: 100%;color: #004BA6} #thankLP .hintSec h3:before, #thankLP .hintSec h3:after {content: ''; position: relative; display: inline-block; width: 45px; height: 2px; border-top: solid 1px #004BA6; border-bottom: solid 1px #004BA6;} #thankLP .hintSec h3:before {left: -10px; top: -4px;} #thankLP .hintSec h3:after {right: -10px; top: -4px;} #thankLP .hintSec .hintBox {display: table;width: 100%;margin-bottom: 5%} #thankLP .hintSec .hintBox figure.spView {display: none!important} #thankLP .hintSec .hintBox figure {display: table-cell;vertical-align: top;width: 40%;} #thankLP .hintSec .hintBox .txt {display: table-cell;vertical-align: top;width: 60%;box-sizing: border-box;padding-left: 2%;} #thankLP .hintSec .hintBox figure .infoList {background: #f7f7f7;box-sizing: border-box;padding: 15px;} #thankLP .hintSec .hintBox figure .infoList h4 {font-size: 16px;} #thankLP .hintSec .hintBox figure .infoList ul {} #thankLP .hintSec .hintBox figure .infoList ul li{position: relative;padding-left: 20px;font-size: 14px;} #thankLP .hintSec .hintBox figure .infoList ul li:before{content: '';background: url("../img/icon-check.png") no-repeat;position: absolute;left: 0;background-size: 100%; width: 14px; height: 14px;top: 6px;} @media screen and (max-width: 727px) { #thankLP .hintSec .hintBox {display: block;width: 100%;margin-bottom: 5%} #thankLP .hintSec .hintBox figure {display: block;width: 100%;box-sizing: border-box;padding: 0 0 0;} #thankLP .hintSec .hintBox figure.spView {display: inline-block !important} #thankLP .hintSec .hintBox figure.spView.mini {width: 70%; margin: 0 15%;} #thankLP .hintSec .hintBox .txt {display: block;width: 100%;;padding: 0;font-size: 14px;} #thankLP .hintSec h3 {width: 100%;font-size:20px;} #thankLP .hintSec h3:before, #thankLP .hintSec h3:after {content: ''; position: absolute; display: inline-block; width: 40px; height: 2px; } #thankLP .hintSec h3:before {left: 0; top: 50%;bottom: 0} #thankLP .hintSec h3:after {right: 0; top: 50%;bottom: 0} #thankLP .txtSmall {font-size: 14px;} } #thankLP .notion{max-width: 900px;margin: 0 auto 60px;font-size: 16px;font-weight: 100;text-align: justify;padding: 15px;box-sizing: border-box;background: #f7f7f7;border-radius: 8px;} #thankLP .notion.onePoint {border-radius: 20px;border-bottom-left-radius: 0;border-top-right-radius: 0; background-image: linear-gradient(90deg, rgba(107, 230, 208, 1), rgba(57, 130, 219, 1));padding: 20px;} #thankLP .notion.onePoint .inner{background: #fff;box-sizing: border-box;padding: 15px;} #thankLP .notion.onePoint .inner .icon {width: 50px; height: 50px; margin: 0 auto 5px;} #thankLP .notion h3 {border-left: 0;text-align: center;margin-bottom: 15px;} #thankLP .notion.onePoint h3 {color:#21C1B0;font-size: 140%;} #thankLP .notion dl {display: table;width: 100%;font-size: 16px;} #thankLP .notion dl dt {display: table-cell;vertical-align: top;width: 30px;} #thankLP .notion dl dd {display: table-cell;vertical-align: top;} #thankLP .notion.onePoint .listCheck {position: relative;padding-left: 20px;font-weight: bold;} #thankLP .notion.onePoint .listCheck:before {content: '';background: url("../img/icon-check-green.svg") no-repeat;background-size: 16px auto;position: absolute;left: 0;top: 6px;width: 20px; height: 20px;} @media screen and (max-width: 727px) { #thankLP .notion{width: 96%;font-size: 14px;} #thankLP .notion h3 {font-size: 16px} #thankLP .notion dl {font-size: 13px;} #thankLP .notion.onePoint {padding: 15px;} #thankLP .notion.onePoint .inner .icon {width: 30px; height: 30px; margin: 0 auto;} } .slideBtn {border: none;background: none; text-decoration: none; text-align: center;cursor: pointer; border-radius: 6px; font-weight: 700; max-width: 320px; margin: 20px auto; display: block; background-color: #17CFD8; color: #fff; padding: 10px 15px; outline: 0; transition: .5s;} .effect-fade {opacity : 0;transform : translate(0, 60px);transition : all 1000ms;} .effect-fade.effect-scroll {opacity : 1;transform : translate(0, 0);} .effect-zoom {opacity : 0.1;transform : scale(1.3,1.3);;transition : all 1000ms;} .effect-zoom.effect-scroll {opacity : 1;transform : scale(1,1);} .adsBnr {max-width: 960px;margin:0 auto 20px;} .adsBnr img {width: 100%;height: auto;} @media screen and (max-width: 727px) { .adsBnr {width: 96%;margin:0 auto 20px;} } /**** 広告ページ ***/ #adPrice {} #adPrice section {box-shadow: none;} #adPrice h1 {color: #fff;text-align: center;padding: 50px 50px;background:#B4B4B4;font-size: 30px;} #adPrice h1 .areaName {border-radius: 30px;margin: 0 auto;max-width: 150px; box-sizing: border-box;background: #F83E41;color: #fff;font-size: 20px;} #adPrice .List {} #adPrice .List img {width: 100%;height: auto;} #adPrice .List .Block {max-width: 990px;box-sizing: border-box;margin: 0 auto 60px;border-radius: 4px;box-shadow: 0px 0px 5px 0px #C8C8C8;background: #fff;overflow: hidden;} #adPrice .List .Block .Cnt {padding: 15px;box-sizing: border-box;} #adPrice .List .Block h2.osusume {color: #fff;text-align: center;padding:15px 10px;background-color: #4fb4e8;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;font-size: 36px;} #adPrice .List .Block h2.special {color: #fff;text-align: center;padding:15px 10px;background-color:#FF748D;background: linear-gradient(-45deg, #E93F41, #E41919, #E93F41, #FF748D);background-size: 400% 400%;animation: gradient 15s ease infinite;font-size: 36px;} #adPrice .List .Block h2.normalTit {padding: 15px;color: #fff;margin-bottom: 20px;font-size: 30px;} #adPrice .List .Block .note {background:#f1f1f1;padding:30px;margin-bottom: 20px;border-radius: 4px;} #adPrice .List .Block .note ul {} #adPrice .List .Block .note ul li{background: url("../img/icon-dcircle.png") 0 2px no-repeat;padding-left: 30px;text-align: left;font-weight: bold;} .reasonNote {background: #f7f7f7;border-radius: 4px;padding:3% 2%;max-width: 80%;margin: 0 auto 30px;} .reasonNote h3 {border: none;text-align: center;color: #11A7B9;font-size: 110%} #adPrice .List .Cnt .photo {float: right; width: 48%;} #adPrice .List .Cnt .photo img {width: 100%; height: auto; margin-bottom: 15px;} #adPrice .List .Cnt .txt {float: left; width: 50%;} #adPrice .List .Cnt .txt .sup {font-size: 80%;color: #6B6B6B;margin-bottom: 20px;} .adsTable td{ text-align: right;} @keyframes gradient { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } @media only screen and (min-width:728px) and (max-width:989px) { #adPrice .List .Block .note {padding: 40px 30px;margin:20px auto 50px;} .reasonNote {padding: 2%;max-width: 90%;margin: 0 auto 30px;} } @media screen and (max-width: 727px) { #adPrice h1 {padding: 25px 10px;font-size: 28px;} #adPrice .List .Block {max-width: 98%;margin: 0 auto 40px;} #adPrice .List .Block h2.osusume, #adPrice .List .Block h2.special{font-size: 20px;} #adPrice .List .Block h2.normalTit {padding: 15px 1%; font-size: 18px;} #adPrice .List .Block h2.osusume, #adPrice .List .Block h2.special {font-size: 30px;} #adPrice .List .Block .note {padding: 2%;} #adPrice .List .Block .note ul li{background: url("../img/icon-circle.png") 0 2px no-repeat;font-weight: bold;} #adPrice .List .Block .note {width: 100%; padding:2%;margin-bottom: 30px;} .reasonNote {padding: 2%;max-width: 100%;margin: 0 auto 30px;} #adPrice .List {} #adPrice .List .Cnt {width: 100%; padding: 2%;margin: 0 auto;background: #fff;overflow: hidden;} #adPrice .List .Cnt h2 {padding: 0.5em;color: #fff;background:#079FAC;border-bottom: solid 2px #004F82;} #adPrice .List .Cnt .photo {float: none; width: 90%; margin: 0 auto;} #adPrice .List .Cnt .photo img {width: 100%; height: auto; margin:0 auto 15px;} #adPrice .List .Cnt .txt {float: none; width: 100%;} #adPrice .List .Cnt .txt .sup {font-size: 80%;color: #6B6B6B;margin-bottom: 20px;} .adsTable td{ text-align: right;} } .discountBox {padding: 3% 2%;max-width: 80%;margin: 0 auto 30px;} .discountTit {border-bottom: solid 4px skyblue;position: relative; border-left: none; padding-left: none; font-size: 140%; padding: 0;} .discountTit:after { position: absolute; content: " "; display: block; border-bottom: solid 4px #ffc778; bottom: -4px; width: 30%;} .discountTable {} .discountTable th{width: 50%;background: #27B5C5;color: #fff;} .discountTable td{width: 50%;text-align: right;} /**** マニュアルページ ***/ #manualGC {} #manualGC section {box-shadow: none;} #manualGC h1 {color: #fff;text-align: center;padding: 50px 50px;font-size: 22px;background-image: linear-gradient( 135deg, #65FDF0 10%, #1D6FA3 100%);} #manualGC .List {} #manualGC .List img {width: 100%;height: auto;} #manualGC .List .Block {max-width: 990px;box-sizing: border-box;margin: 0 auto 60px;border-radius: 4px;box-shadow: 0px 0px 5px 0px #C8C8C8;background: #fff;overflow: hidden;} #manualGC .List .Block .Cnt {padding: 15px;box-sizing: border-box;overflow: hidden;border-bottom: 1px solid rgba(223,223,223,1.00);width: 96%;margin: 0 auto 20px;} #manualGC .List .Block .Cnt.last {border-bottom: none;margin-bottom: 0} #manualGC .List .Block h2 {color: #fff;text-align: center;padding:15px 10px;background-color: #4fb4e8;background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;font-size: 36px;font-size: 20px;} #manualGC .List .Block .Cnt .manualIMG {float: left; width: 46%;} #manualGC .List .Block .Cnt .blinking {animation: flash 1s linear infinite;} @keyframes flash { 0%,100% {opacity: 1;} 50% {opacity: 0;} } #manualGC .List .Block .Cnt .bg-01 {background: url("../img/manual-groupchat/bg-figure01.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-04 {background: url("../img/manual-groupchat/bg-figure04.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-07 {background: url("../img/manual-groupchat/bg-figure07.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-08 {background: url("../img/manual-groupchat/bg-figure08.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-09 {background: url("../img/manual-groupchat/bg-figure09.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-11 {background: url("../img/manual-groupchat/bg-figure11.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-12 {background: url("../img/manual-groupchat/bg-figure12.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-13 {background: url("../img/manual-groupchat/bg-figure13.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .bg-15 {background: url("../img/manual-groupchat/bg-figure15.jpg") no-repeat;background-size:100% auto;} #manualGC .List .Block .Cnt .txt {float: right;width: 50%;} #manualGC .List .Block .Cnt .txt dl {display: table;overflow: hidden; font-weight: bold;} #manualGC .List .Block .Cnt .txt dl dt {color:#DDA501; display: table-cell;vertical-align: top;padding: 10px 0;box-sizing: border-box;width: 20px;} #manualGC .List .Block .Cnt .txt dl dd {display: table-cell;vertical-align: top;padding: 10px;box-sizing: border-box;width: calc(100% - 20px);} #manualGC .List .Block .sampleBox {width: 100%; overflow: hidden;border-radius: 6px; background: #f7f7f7;box-sizing: border-box;padding: 25px;} #manualGC .List .Block .sampleBox .box {float: left; width: 48%;} #manualGC .List .Block .sampleBox .box:nth-child(2n) {float: right;} #manualGC .List .Block .sampleBox .box h3 {text-align: left;} #manualGC .List .Block .sampleBox .box figure {} #manualGC .List .Block .sampleBox .box p {margin-bottom: 0} #manualGC .List .Block .note {background:#f1f1f1;padding:30px;margin-bottom: 20px;border-radius: 4px;} #manualGC .List .Block .note ul {} #manualGC .List .Block .note ul li{background: url("../img/icon-dcircle.png") 0 2px no-repeat;padding-left: 30px;text-align: left;font-weight: bold;} .reasonNote {background: #f7f7f7;border-radius: 4px;padding:3% 2%;max-width: 80%;margin: 0 auto 30px;} .reasonNote h3 {border: none;text-align: center;color: #11A7B9;font-size: 110%} #manualGC .List .Cnt .photo {float: right; width: 48%;} #manualGC .List .Cnt .photo img {width: 100%; height: auto; margin-bottom: 15px;} #manualGC .List .Cnt .txt {float: left; width: 50%;} #manualGC .List .Cnt .txt .sup {font-size: 80%;color: #6B6B6B;margin-bottom: 20px;} .adsTable td{ text-align: right;} @keyframes gradient { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .tips {position: relative;background: #f7f7f7;border-radius: 8px; padding: 2% 2% 1% 2%;font-weight: bold;} .tips .icon {position: absolute;width: 25px;height: 25px;top: -10px; left: -10px;} .tips dl {display: table;overflow: hidden; font-weight: bold;} .tips dl dt {color:#DDA501; display: table-cell;vertical-align: top;padding: 10px;box-sizing: border-box;width: 20px;} .tips dl dd {display: table-cell;vertical-align: top;padding: 10px;box-sizing: border-box;width: calc(100% - 20px);} @media only screen and (min-width:728px) and (max-width:989px) { #manualGC .List .Block .note {padding: 40px 30px;margin:20px auto 50px;} .reasonNote {padding: 2%;max-width: 90%;margin: 0 auto 30px;} } @media screen and (max-width: 727px) { #manualGC {margin-top: 50px;} #manualGC h1 {padding: 25px 10px;font-size: 24px;} #manualGC .List .Block {max-width: 98%;margin: 0 auto 40px;} #manualGC .List .Block h2{font-size: 20px;} #manualGC .List {} #manualGC .List .Cnt {width: 100%; padding: 2%;margin: 0 auto 25px;background: #fff;overflow: hidden;} #manualGC .List .Cnt h2 {padding: 0.5em;color: #fff;background:#079FAC;border-bottom: solid 2px #004F82;} #manualGC .List .Block .Cnt .manualIMG, #manualGC .List .Block .Cnt .txt {float: none; width: 100%;} #manualGC .List .Block .sampleBox {margin-top: 25px;} #manualGC .List .Block .sampleBox .box h3 {font-size: 16px;} #manualGC .List .Block .sampleBox .box {float: none; width: 100%;margin-bottom: 40px;} #manualGC .List .Block .sampleBox .box:nth-child(2n) {margin-bottom: 0} } #maintenance {position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 450px; height:400px;color: #fff; box-shadow:none;} #maintenance .logo {width: 300px;margin: 0 auto 20px} #maintenance .logo img {width: 100%;height: auto;line-height: 1} #maintenance h2 {text-align: left;font-size: 26px;} #maintenance h3 {text-align: left;font-size: 20px; border: none;color: #fff;padding: 0;margin-bottom: 10px;} #maintenance p {font-size: 14px;} @media screen and (max-width: 727px) { #maintenance {width: 260px; height:400px} #maintenance .logo {width: 240px;margin: 0 auto 20px} #maintenance h2 {font-size: 23px;} #maintenance h3 {font-size: 18px;} } .fixed-CV-Btn {position: fixed; bottom: 0;width: 100%;background: rgba(0,0,0,.60);box-sizing: border-box;padding: 20px 0;z-index: 100} .fixed-CV-Btn .Cnt {width: 96%; max-width: 1200px;margin: 0 auto;} .fixed-CV-Btn .Cnt .cBtn{padding: 20px 0; font-size: 120%; margin-bottom: 10px} .funcList .planTable {margin-bottom: 40px;} .funcList .planTable .item{min-width: 100px;box-sizing: border-box;} .fixed-CV-Btn p {margin-bottom: 0;} .fixed-CV-Btn p a {color: #fff;} .scroll-note {display: none; margin-bottom: 10px; font-size: 14px; color: #555;} @media screen and (max-width: 727px) { .fixed-CV-Btn .Cnt .cBtn{padding: 15px 20px; font-size: 16px; margin-bottom: 10px} .funcList {width: 100%} .funcList .planTable {margin-bottom: 30px;min-width: 600px;} .funcList .planTable .item{min-width: 50px;} .funcList .planTable th.func, .funcList .planTable td.func, .funcList .planTable .item {font-size: 9px;} .funcList .item {padding: 8px 2px;} } /* balloon */ .balloon { width: 100%; margin: 1.5em 0 2em; overflow: hidden;} .balloon .faceicon {float: left; margin-right: -90px; width: 80px; height: 80px; overflow: hidden;border: solid 3px #E7E7E7; border-radius: 50%;} .balloon .faceicon img{width: 100%; height: auto;} .balloon .faceicon p{font-size: 10px;text-align: center;margin-top:0;position: absolute;width: 80px;} .balloon .chatting { width: 100%;} .says {display: inline-block; position: relative; margin: 5px 0 0 105px; padding: 17px 13px; border-radius: 12px; background: #fff;border: 3px solid #E7E7E7;} .says:before {content: "";position: absolute;top: 32px; left: -8px;margin-top: -9px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 9px 9px 9px 0;border-color: transparent #fff transparent transparent;z-index: 2;} .says:after {content: "";position: absolute;top: 32px; left: -12px;margin-top: -10px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 10px 10px 10px 0;border-color: transparent #E7E7E7 transparent transparent;z-index: 1;} .says p,.think p {margin: 0;padding: 0;} .think{display: inline-block; position: relative; margin: 5px 0 0 145px; padding: 17px 13px; border-radius: 12px; background: #fff;border: 3px solid #E1E1E1;} .think::before{ content: ''; position: absolute; display: block; border-radius: 50%; background-color: #fff; border: 3px solid #E1E1E1; left: -35px; top: 15px; width: 23px; height: 23px;} .think::after{content: ''; position: absolute; display: block; border-radius: 50%; background-color: #fff; border: 3px solid #E1E1E1; left: -55px; top: 22px; width: 10px; height: 10px;} .actionSample {width: 96%; max-width: 900px; margin: 0 auto 40px; font-size: 18px; font-weight: 100; text-align: justify; padding:25px; border: 6px double #F0B930;background: #FFDADA;box-sizing: border-box;} .actionSample h2 {text-align: center;font-size: 28px;color: #004BA6} .actionSample h3 {border-left: none;font-size: 22px;position: relative;text-align: center; display: inline-block; padding: 0 55px;box-sizing: border-box;width: 100%;color: #000;border-bottom: 2px solid #000;padding-bottom: 5px;margin-bottom: 15px;margin-top: 30px;} @media screen and (max-width: 727px) { .actionSample {width: 96%;font-size: 13px;padding:15px 8px;} .actionSample h2 {font-size: 16px;} .actionSample h3 {font-size: 15px;margin-top: 10px;padding: 0 15px;} } .localNote {width: 720px;margin: 0 auto 50px;border:4px solid #F87F81;background: #FFDCDD; border-radius: 8px;box-sizing: border-box;padding: 20px;} .localNote h3 {border: none;text-align: center;color: #0cb2ba; padding: 0} .localNote table {margin-bottom: 15px;} .localNote table th{width: 30%} .localNote p {margin-bottom:30px;} @media screen and (max-width: 727px) { .localNote {width: 90%;padding: 15px;} .localNote table th{width: 35%} .localNote h3 {font-size: 18px;} .localNote p {font-size: 14px;} }