@charset "UTF-8";
aside {
margin: 0;
}
.errorTxt {
color: #E22E31;
}
#shootingPlan li a:hover {
color: #f0d998;
}
.commBlc {
max-width: 1100px;
padding: 0 4%;
margin: 0 auto;
}
.txtArea {
margin-bottom: 4rem;
text-align: center;
}
.bgCommBlc {
background: #fcfbff;
padding: 5rem 0;
}
.sslBlc {
margin-bottom: 4rem;
}
.sslBlc:last-child {
padding: 0;
}
.sslBlc .ttl {
font-size: 1.5rem;
text-align: center;
margin-bottom: 2rem;
}
.sslBlc .ttl::after {
content: none;
}
.sslBlc .ttl img {
margin-right: 15px;
max-width: 20px;
}
.sslBlc .ttl + p {
text-align: center;
}

@media screen and (max-width: 812px){
.commBlc {
padding: 0;
}
.bgCommBlc {
background: #fcfbff;
padding-left: 2%;
padding-right: 2%;
}
}

@media screen and (max-width: 480px){
.bgCommBlc {
padding: 4rem 4%;
}
.sslBlc {
margin-bottom:30px;
}
.sslBlc .ttl {
font-size: 1.2rem;
}
}

/* =======================================
contact contents
======================================= */
.formCommBlc {
max-width: 1280px;
padding: 7rem 2% 5rem;
margin: 0 auto;
}
.ttlMethod.kurume {
background-image: url("../img/studio/kurume-rbn.svg") ;
}
.ttlMethod.yanagawa {
background-image: url("../img/studio/yanagawa-rbn.svg");
}
.ttlMethod.hakata {
background-image: url("../img/studio/hakata-rbn.svg");
}
.ttlMethod {
padding: 2% 0 4%;
width: 90%;
display: inline-block;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
font-size: 1.7rem;
color: #fff !important;
text-shadow: 1px 1px 0 #fff;
position: absolute;
z-index: 1;
top: -35px;
left: 25px;
}
.methodMain ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.methodMain li {
width: 32%;
position: relative;
margin-top: 50px;
margin-right: 2%;
}
.methodMain li:nth-child(3n+3) {
margin-right: 0;
}
.methodMain li:last-child {
margin-right: 0;
}
.methodMain .ttlMethod span {
position: relative;
padding-left: 30px;
width: 100%;
display: block;
text-shadow: 1px 1px 2px rgb(0,0,0,0.35);
font-weight: 600;
}
.methodMain li:nth-child(3) .ttlMethod span {
text-shadow: 1px 1px 3px rgb(0,0,0,0.35), -1px -1px 3px rgb(0,0,0,0.35);
}
.methodMain .methodSub {
background: #f9f8e3;
padding: 4rem 2rem;
border-radius: 20px;
height: 260px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.methodMain .methodSub p {
padding: 0 0 0 50px;
text-align: left;
}
.methodMain .methodSub p:last-child {
margin-bottom: 0;
}
.methodMain .methodSub p .ttl {
display: block;
}
.methodMain .methodSub.purple .tel {
background: url(../img/inquiry/icon_tel_purple.png) no-repeat left 50%;
}
.methodMain .methodSub.blue .tel {
background: url(../img/inquiry/icon_tel_blue.png) no-repeat left 50%;
}
.methodMain .methodSub.yellow .tel {
background: url(../img/inquiry/icon_tel_yellow.png) no-repeat left 50%;
}
.methodMain .methodSub .tel {
float: left;
min-height: 50px;
margin: 0 0 7% 0;
}
.methodMain .methodSub.purple .fax {
background: url(../img/inquiry/icon_fax.png) no-repeat left 50%;
}
.methodMain .methodSub .fax {
float: left;
min-height: 50px;
margin: 0 15% 7% 0;
padding-left: 50px;
}
.methodMain .methodSub .mail {
float: left;
min-height: 50px;
margin: 0 0 7% 0;
}
.methodMain .methodSub .mail.mailkurume {
background: url(../img/inquiry/icon_free_purple.png) no-repeat left 50%;
}
.methodMain .methodSub .mail.mailYanagawa {
background: url(../img/inquiry/icon_free_blue.png) no-repeat left 50%;
}
.methodMain .methodSub .mail.mailhakata {
background: url(../img/inquiry/icon_free.png) no-repeat left 50%;
}
.methodMain .methodSub.purple .number a {
color: #DD97EA;
}
.methodMain .methodSub.purple .number {
color: #DD97EA;
}
.methodMain .methodSub.blue .number a {
color: #BED4FF;
}
.methodMain .methodSub.blue .number {
color: #BED4FF;
}
.methodMain .methodSub.yellow .number a {
color: #DBCB0D;
}
.methodMain .methodSub.yellow .number {
color: #DBCB0D;
}
.methodMain .methodSub .number {
font-size: 160%;
font-weight: normal;
padding-left: 15px;
}
#formSubmit input:nth-child(2) {
margin-left: 2%;
}

@media screen and (max-width: 1140px){
.ttlMethod {
padding: 2% 10% 4%;
}
.methodMain li {
width: 48%;
margin-right: 4%;
max-width: 1000px;
}
.methodMain li:nth-child(3n+3) {
margin-right: 4%;
}
.methodMain li:nth-child(2n+2) {
margin-right: 0;
}
.methodMain li:last-child {
margin-right: 0;
}
.methodMain ul {
justify-content: center;
}
}

@media screen and (max-width: 1000px){
.ttlMethod {
padding: 2% 7% 4%;
}
}

@media screen and (max-width: 812px){
.ttlMethod {
font-size: 1.3rem;
padding: 2% 17px 4%;
}
}

@media screen and (max-width: 640px){
.methodMain li {
width: 100%;
margin-right: 0;
}
.methodMain .methodSub {
justify-content: space-around;
height: 100%;
overflow: hidden;
}
.methodMain li:nth-child(3n+3) {
margin-right: 0;
}
.ttlMethod {
padding: 2% 0 4%;
background-position: unset;
}
.methodMain .methodSub .mail, 
.methodMain .methodSub .tel {
width: 100%;
}
}

@media screen and (max-width: 500px){
.methodMain .methodSub {
display: block;
}
}

@media screen and (max-width: 480px){
.formCommBlc {
padding: 5rem 4% 4rem;
}
}


/* =======================================
form
======================================= */
.required, .nRequired {
background-color: #F5A8A8;
color: #fff;
display: inline-block;
font-size: 12px;
margin: 0 5px;
padding: 2px 5px;
text-align: center;
line-height: 23px;
width: 57px;
border-radius: 50px;
}
.nRequired {
background-color: #999;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
#formBlc table {
box-sizing: border-box;
margin: 0 0 3%;
width: 100%;
}
#formBlc table th, #formBlc table td {
padding: 30px;
}
.tblForm th, .tblForm td {
border-bottom: 1px solid #d5d5d5;
word-break: break-word;
}
.tblForm th {
width: 30%;
padding: 2%;
text-align: left;
}
.tblForm td {
padding: 2%;
text-align: left;
}
table th, table td {
vertical-align: top;
text-align: left;
font-weight: normal;
}
#formSubmit {
text-align: center;
margin-top: 50px;
font-size: 90%;
}
#formBlc input[type="tel"] {
width: 20%;
}
#formBlc select {
padding: 5px;
font-size: 90%;
border-radius: 10px;
border: 1px solid #A6A6A6;
background: #F9F9F9;
color: #4b4b4b;
margin-bottom:10px;
}
#formBlc input.wideSize {
width: 80%;
}
#formBlc input.middleSize {
width: 50%;
}
#formBlc input.narrowSize {
width: 15%;
}
#formBlc input, #formBlc textarea {
box-sizing: border-box;
border: 1px solid #A6A6A6;
color: #4b4b4b;
}
#formBlc textarea {
width: 100%;
height: 200px;
}
#formSubmit input {
color: #5a5a5a;
border: 1px solid #707070;
border-radius: 50px;
background: #fff;
padding: 0 20px;
min-width: 100px;
font-size: 110%;
}
#formSubmit input:hover {
opacity: .5;
transition: all .4s;
}
.focusAnimation {
border: 1px solid #ccc;
transition: all 0.3s ease-in-out 0s;
}
.focusAnimation:focus {
border: 1px solid #39c;
box-shadow: 0 0 5px #39c;
outline: medium none;
transition: all 0.3s ease-in-out 0s;
}
.policyTxt a {
text-decoration: underline !important;
}
.policyTxt a:hover {
text-decoration: none !important;
}
.completeBlc {
text-align: center;
}
.completeBlc .ttl {
font-size: 120%;
line-height: 1.8;
text-align: center;
padding: 7px 10px;
margin-bottom: 2%;
color: unset;
}
.completeBlc .ttl::after {
content: none;
}

@media screen and (max-width: 768px){
#formBlc table th, #formBlc table td {
display: block;
border: none;
padding: 10px;
}
.tblComm.singleRow th, .tblForm.singleRow th {
display: block;
font-weight: bold;
padding-bottom: 0;
}
.tblForm th {
width: auto;
}
#formBlc table td {
margin: 0 0 5%;
}
.tblComm.singleRow td, .tblForm.singleRow td {
display: block;
}
#formBlc input.middleSize {
width: 70%;
}
#formBlc input.narrowSize {
width: 35%;
}
#formBlc input[type="tel"] {
width: 23%;
}
}

@media screen and (max-width: 480px){
#formSubmit {
margin-top: 30px;
}
}

/* =======================================
プライパソーポリシー privacy policy
======================================= */
.ttlStyle03 {
font-size: 140%;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 4%;
padding-bottom: 4%;
position: relative;
}
.ttlStyle03::after {
background: url(../img/inquiry/line_dot_green.png) repeat-x left center;
content: "";
width: 80%;
height: 3px;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.info {
margin: 0 0 50px;
text-align: center;
}
#policy dl {
margin-top: 7%;
}
#policy dt {
margin: 0 0 2%;
font-size: 100%;
font-weight: bold;
}
#policy dd {
margin: 0 0 5%;
}
.info.txtForSp {
margin-bottom: 50px;
}

@media screen and (max-width: 768px){
.ttlStyle03 {
font-size: 120%;
}
}

@media screen and (max-width: 480px){
.info.txtForSp {
margin-bottom: 30px;
}
.info {
margin: 0 0 30px;
}
}

/* =======================================
フォームボタン設定
======================================= */

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
input[type="submit"],
input[type="button"] {
background: #555;
color: #fff;
font-size: 1rem;
min-width: 100px;
}
main > .flexBox {
max-width:880px;
width: 90%;
margin: 8rem auto 0;
}
main > .flexBox dl {
padding: 2rem;
background: #fff;
margin-bottom: 2rem;
width: 100%;
}
main > .flexBox .open + dd{
display: block;
}
main > .flexBox dl dt {
font-weight: 700;
display: block;
width: 100%;
position: relative;
cursor: pointer;
}
main > .flexBox dt:after {
position: absolute;
content: "OPEN";
right: 20px;
top: -2rem;
width: 20%;
max-width: 80px;
display: block;
background: #D01F1F;
color: #fff;
padding: .1rem;
text-align: center;
font-size: 70%;
font-weight: 600;
}
main > .flexBox dt.open:after {
content: "CLOSE";
}
main > .flexBox dl dt > span:first-of-type {
display: inline-block;
font-size: 80%;
padding:.3rem 1rem;
background: #0f0f0f;
color: #fff;
text-align: center;
border-radius: 20px;
font-weight: 400;
margin-right: 1rem;
}
main > .flexBox dl dd {
margin-top: 2rem;
padding: 0 2rem;
display: none;
}

@media screen and (max-width: 480px) {
main > .flexBox {
margin-top: 4rem;
}
main > .flexBox dl dt > span:first-of-type {
display: block;
width: 45%;
padding: .3rem;
margin-bottom: .8rem;
}
main > .flexBox dl dd {
padding: 0;
margin-top: .8rem;
}
}


/* =======================================
txtTtl
======================================= */
h2.txtTtl {
color: #f0d998;
}
main > article h2 {
margin-bottom: 4rem;
}

@media screen and (max-width: 480px){
main > article h2 {
margin-bottom: 30px;
}
}

/* =======================================
mainvisual タイトルetc
======================================= */
nav + section {
position: relative;
}
nav + section > div {
position: absolute;
max-width: 600px;
width: 90%;
left: 10%;
top: 18%;
z-index: 5;
background: #fff;
box-shadow: 0 0 10px #ddd;
border-radius: 15px;
}
nav + section > div div {
position: relative;
padding: 5rem;
}
nav + section > div.txtArea div:after {
content: "";
background: url("../img/common/frame-flower02.png") repeat-x;
width: 100%;
height: 50px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 2rem;
position: relative;
text-align: center;
}
nav + section > div.txtArea h2 span {
font-size:1rem;
display: block;
line-height: 100%;
}
nav + section > div.txtArea h2:after {
content: "";
display: block;
left: calc(50% - 25px);
position: absolute;
width: 50px;
height: 2px;
background: #9CD8D8;
bottom: -15%;
}
nav + section > div.txtArea {
text-align: center;
}
nav + section > div.txtArea p {
margin: 3rem auto 0;
display: inline-block;
text-align: left;
}
#sub #mainVisual:not(.width100) {
width: 70%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
content: "";
background: linear-gradient(to right, #FFF, transparent);
width: 30%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}
nav + section  #mainVisual {
position: relative;
width: 100%;
margin: 0 auto;
}

@media screen and (max-width: 1400px) {
nav + section > div div {
padding: 3rem 3rem 4rem;
}
nav + section > div  {
left: 2%;
margin-bottom: 5rem;
}
}

@media screen and (max-width: 1280px) {
nav + section > div {
max-width:500px;
left: 5%;
top: 10%;
}
#sub #mainVisual {
width: 100%;
}
#sub #mainVisual:after {
display: none;
}
nav + section > div {
max-width: none;
position: relative;
margin-top: -2rem;
}
nav + section {
height: auto;
}
nav + section > div {
width: 80%;
left: 10%;
}
nav + section > div.txtArea h2 {
color: #9CD8D8;
font-size: 1.5rem;
position: relative;
text-align: center;
}
#sub #mainVisual:not(.width100) {
width: 100%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
display: none;
}
}

@media screen and (max-width: 812px){
#points .menuArea li figure img {
height: 225px;
}
#slider #mainSlider img {
height: 250px;
}
}

@media screen and (max-width: 480px){ 
nav + section > div {
width: 96%;
left: 2%;
}
nav + section > div div {
padding: 2rem 2rem 2.5rem;
}
.txtArea {
margin-bottom: 30px;
}
}