@charset 'UTF-8';





/* 基本設定

------------------------------------------------------------ */

html {

  font-size: 62.5%;

}



body {

  min-width: 992px;

  max-width: 1920px;

  margin: 0 auto;

  background: #fff;

  color: #2f395d;

  font-family: '游ゴシック', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

  font-size: 16px;

  font-size: 1.6rem;

  font-weight: 500;

  line-height: 1.7;

  letter-spacing: .08em;



  -webkit-font-feature-settings: 'palt';

          font-feature-settings: 'palt';

}





@media screen and (max-width: 767px) {

  body {

    overflow-x: hidden;

    min-width: 320px;

  }

}



/* IE10以降游ゴシックオフ */

@media all and (-ms-high-contrast:none) {

  body {

    font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

  }

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 500;

}



img {

  vertical-align: top;

}



a {

  outline: 0;

  color: inherit;

  text-decoration: none;

  -webkit-transition: all .2s;

          transition: all .2s;

}









/* flexbox */

.flex {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display:         flex;

  margin: 0 -15px;



  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

}









/* フォント

------------------------------------------------------------------------------ */



/* フォントの色 */

.black {

  color: #333;

}



.red {

  color: #ea1a65;

}









/* 改行制御

------------------------------------------------------------------------------ */

.br {

  display: inline-block;

  font-style: normal;

}



@media screen and (max-width: 543px) {

  .br_xs::before {

    white-space: pre;

    content: '\A';

  }

}



@media screen and (min-width: 544px) and (max-width: 767px) {

  .br_sm::before {

    white-space: pre;

    content: '\A';

  }

}



@media screen and (min-width: 768px) and (max-width: 991px) {

  .br_md::before {

    white-space: pre;

    content: '\A';

  }

}



@media screen and (min-width: 992px) {

  .br_lg::before {

    white-space: pre;

    content: '\A';

  }

}





















/* ページ共通

------------------------------------------------------------------------------ */

.contents {

  max-width: 1030px;

  width: 100%;

  margin: 0 auto;

  padding: 0 15px;

}











/* ヘッダー

------------------------------------------------------------------------------ */

#header {

  margin-top: 0;

}







@media screen and (max-width: 767px) {

  #header {

    margin: 0 -15px;

  }

}









/* イントロ

------------------------------------------------------------------------------ */

#intro {

  margin-top: 4rem;

}



.intro_text {

  width: 48%;

  padding: 15px;

}



.intro_text h2 {

  font-size: 2rem;

  font-weight: bold;

  text-align: left;

}



.intro_text p {

  margin-top: 1rem;

  font-weight: 700;

}



.shop {

  padding: 15px;



  -webkit-box-flex: 1;

  -webkit-flex: 1;

      -ms-flex: 1;

          flex: 1;

}



.shop h2 {

  padding: .2rem 0;

  background: #2f395d;

  color: #fff;

  font-size: 1.8rem;

  font-weight: bold;

  text-align: center;

}



.shop .flex {

  padding-top: 30px;

}



@media screen and (max-width: 767px) {

  .shop .flex {

    padding: 30px 15px 0;

  }

}

.shop_single {

  width: 25%;

  padding-top: 1rem;

  text-align: center;

}



.shop_single span {

  display: block;

  margin-top: .4rem;

  font-size: 1.4rem;

  line-height: 1.5;

}



.shop_single img {

  width: 100%;

  height: auto;

}



.shop_single a {

  display: block;

}



/* 各店少し変更 */

.ypro span,

.tiara span {

  font-size: 1.2rem;

}





.awa,

.blue {

  padding: 0 .8rem;

}



.awa span,

.blue span {

  position: relative;

  top: .8rem;

}





.intro_link {

  display: inline-block;

  margin: 0 auto;

  text-align: center;

}



.intro_link a {

  display: block;

  padding: .4em .8em;

  border-radius: .4rem;

  background: #f6a225;

  color: #fff;

  font-weight: bold;

}



@media screen and (min-width: 768px) {

  .intro_link {

    display: none;

  }

}



@media screen and (max-width: 767px) {

  #intro {

    margin-top: 2rem;

  }

  .intro_text {

    width: 100%;

    padding: 15px;

  }



  .shop {

    padding: 15px;



    -webkit-box-flex: 1;

    -webkit-flex: 1;

        -ms-flex: 1;

            flex: 1;

  }



  .shop_single {

    padding: 0 15px;

  }

}





@media screen and (max-width: 543px) {

  .shop_single {

    width: 50%;

  }

}













/* 投稿手順

------------------------------------------------------------------------------ */

#flow {

  margin-top: 4rem;

}



#flow .contents {

  padding: 4rem 6rem;

  background: -webkit-repeating-linear-gradient(135deg, #fff1f6, #fff1f6 10px, #fff9fb 4px, #fff9fb 20px);

  background:         repeating-linear-gradient(-45deg, #fff1f6, #fff1f6 10px, #fff9fb 4px, #fff9fb 20px);

}



@media screen and (max-width: 767px) {

  #flow .contents {

    padding: 2rem 25px;

  }

}



@media screen and (max-width: 543px) {

  #flow .contents {

    padding: 2rem 15px;

  }

}



#flow h2 {

  margin-bottom: 3rem;

  padding: .5rem 0;

  font-weight: bold;

  text-align: center;

  line-height: 1.5;

}



.h2_first {

  padding: 0 .4em;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ffa0c2));

  background: -webkit-linear-gradient(transparent 60%, #ffa0c2 60%);

  background:         linear-gradient(transparent 60%, #ffa0c2 60%);

  font-size: 2.4rem;

}



.h2_second {

  padding: 0 .4em;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ffa0c2));

  background: -webkit-linear-gradient(transparent 60%, #ffa0c2 60%);

  background:         linear-gradient(transparent 60%, #ffa0c2 60%);

  font-size: 3.6rem;

}







#flow p:not(.flow_cau) {

  margin-top: 2rem;

  font-weight: bold;

}



.flow_cau {

  margin-top: 1rem;

  padding: 1rem 1.5rem;

  border: 2px dotted #e30136;

  font-weight: bold;

}



.flow_link {

  white-space: nowrap;

}



.flow_link a {

  border-bottom: 1px solid currentColor;

  font-weight: bold;

}



.flow_link a:hover {

  color: #ffb744;

}













/* 投稿フォーム

------------------------------------------------------------------------------ */

#form {

  margin-top: 4rem;

}



#form .contents {

  padding: 2rem 30px;

  border: 8px solid #eaeaea;

}



#form h2 {

  margin-bottom: 2rem;

  font-size: 3.2rem;

  font-weight: bold;

  text-align: center;

  line-height: 1.5;

}





@media screen and (max-width: 767px) {

  #form {

    padding: 0 15px;

  }

}



#form input,

#form button,

#form textarea,

#form select {

  border: none;

  border-radius: 0;

  outline: none;

  font-family: inherit;



  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}





.form_in {

  margin-top: 1rem;

}





.label {

  width: 50%;

  padding: 1rem 3rem 1rem 0;

  font-size: 1.8rem;

  font-weight: bold;

  text-align: right;

}



.input {

  width: 50%;

  padding: 1rem 0;

}



.input input,

.input textarea {

  padding: .6rem 1.2rem;

  background-color: #f3f3f3;

}



.input textarea {

  min-height: 5rem;

  resize: vertical;

}



.submit {

  width: 100%;

  text-align: center;

}



.submit input {

  display: inline-block;

  margin: 2rem auto 1rem;

  padding: 1rem 4rem;

  background: #2f395d;

  color: #fff;

  font-size: 1.6rem;

  font-weight: bold;

  cursor: pointer;

  -webkit-transition: .3s all;

          transition: .3s all;

}



.submit input:hover {

  background: #f6a225;

}







/* 必須 */

.req {

  display: inline-block;

  margin-left: 1rem;

  padding: 0 .4rem;

  border-radius: .3rem;

  background: #f6a225;

  color: #fff;

  font-size: 1.2rem;

  vertical-align: .3rem;

}



.mail_cau {

  display: block;

  font-size: 1.4rem;

}





/* inputの幅 */

.w8 {

  width: 8rem;

}



.w20 {

  width: 20rem;

}



.w30 {

  width: 30rem;

}



.w40 {

  width: 40rem;

}





@media screen and (max-width: 767px) {

  .label {

    width: 100%;

    padding: 0;

    text-align: left;

  }



  .input {

    width: 100%;

    padding: 0 0 2rem;

  }



  .form_in {

    padding: 0 15px;

  }

}







@media screen and (max-width: 543px) {

  .form_in {

    padding: 0;

  }



  .w30,

  .w40 {

    width: 100%;

  }

}















/* 送信確認画面(#formで囲んでいる)

------------------------------------------------------------------------------ */

.conf_text {

  font-size: 2rem;

  font-weight: bold;

  text-align: center;

}



.error_con {

  margin-top: 1rem;

}



@media screen and (max-width: 543px) {

  .form_conf .contents {

    padding: 2rem 15px !important;

  }



  .conf_text {

    text-align: left;

  }

}



.return {

  width: 100%;

  text-align: center;

}



.return input {

  display: inline-block;

  margin: 2rem auto 1rem;

  padding: 1rem 4rem;

  background: #999;

  color: #fff;

  font-size: 1.6rem;

  font-weight: bold;

  cursor: pointer;

  -webkit-transition: .3s all;

          transition: .3s all;

}



.return input:hover {

  background: #ccc;

}



.conf_table {

  width: 100%;

  margin-top: 2rem;

}



.conf_table tr {

  padding: .5rem 0;

}



.conf_table td {

  display: block;

  width: 100%;

}











.correct {

  width: 50%;

  padding-right: 1rem;

  text-align: right;

}



.send {

  width: 50%;

}



.correct input {

  display: inline-block;

  margin: 2rem auto 1rem;

  padding: 1rem 4rem;

  background: #999;

  color: #fff;

  font-size: 1.6rem;

  font-weight: bold;

  cursor: pointer;

  -webkit-transition: .3s all;

          transition: .3s all;

}



.correct input:hover {

  background: #ccc;

}





.send input {

  display: inline-block;

  margin: 2rem auto 1rem;

  padding: 1rem 4rem;

  background: #ffb744;

  color: #fff;

  font-size: 1.6rem;

  font-weight: bold;

  cursor: pointer;

  -webkit-transition: .3s all;

          transition: .3s all;

}



.send input:hover {

  background: #ffcc7b;

}





@media screen and (max-width: 543px) {

  .correct input,

  .send input {

    padding: 1rem 2rem;

  }

}







/* フッター

------------------------------------------------------------------------------ */

#footer {

  margin-top: 4rem;

  padding: .2rem 0;

  background: #2f395d;

  color: #fff;

  font-size: 1.4rem;

  text-align: center;

}













/* トップへ戻るボタン

------------------------------------------------------------ */

#page_top {

  position: fixed;

  right: 1.2rem;

  bottom: 1.2rem;

}



#page_top a {

  display: block;

  width: 4.8rem;

  height: 4.8rem;

  border-radius: 50%;

  background: rgba(0,0,0,.4);

  text-align: center;

}



#page_top a::after {

  position: absolute;

  top: 55%;

  left: 50%;

  width: 1.2rem;

  height: 1.2rem;

  margin: auto;

  border-top: 2px solid #fff;

  border-right: 2px solid #fff;

  content: '';

  -webkit-transform: translate(-50%,-50%) rotate(-45deg);

      -ms-transform: translate(-50%,-50%) rotate(-45deg);

          transform: translate(-50%,-50%) rotate(-45deg);

}