@charset "UTF-8";
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.woff2?7xxj0z") format("woff2"), url("../fonts/icomoon.ttf?7xxj0z") format("truetype"), url("../fonts/icomoon.woff?7xxj0z") format("woff"), url("../fonts/icomoon.svg?7xxj0z#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-arrow01:before {
  content: "\e900"; }
	
/******************************************************
    
SP

******************************************************/
@media screen and (max-width: 767px) {
  .sp {
    display: block !important; }
  .pc {
    display: none !important; }
  .accent {
    color: #035;
    font-size: 28px;
    font-weight: 600; }
  .contents {
    background-color: #f8f8f8;
    height: auto;
    min-width: 320px;
    width: auto;
    font-weight: 500;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .contents img {
      vertical-align: top;
      width: 100%;
      height: auto; }
    .contents figure {
      max-width: 100%; }
      .contents figure img {
        max-width: 100%;
        height: auto; }
  #ratia .pageTitle {
    background: #fff; }
    #ratia .pageTitle .inner {
      background: url(../img/sp-title_bg01.jpg) no-repeat center bottom;
      background-size: auto 180px;
      width: 100%;
      padding-bottom: 180px;
      box-sizing: border-box; }
      #ratia .pageTitle .inner em {
        padding-top: 20px;
        display: block;
        line-height: 1;
        text-align: center; }
        #ratia .pageTitle .inner em img {
          width: 120px; }
      #ratia .pageTitle .inner small {
        display: block;
        line-height: 1;
        font-weight: bold;
        font-size: 11px;
        padding-top: 10px;
        letter-spacing: 2px;
        text-align: center; }
      #ratia .pageTitle .inner h1 {
        padding-top: 20px;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        padding-bottom: 20px; }
  #ratia section {
    margin: 20px 20px 0;
    box-sizing: border-box; }
    #ratia section.cont01 {
      background: #fff; }
  #ratia .menuBox {
    text-align: center;
    padding: 20px;
    position: relative; }
    #ratia .menuBox a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
	box-shadow: 1px 1px 4px grey;}
    #ratia .menuBox em {
      display: block;
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
margin: -5px 0 5px;
      }
    #ratia .menuBox p.name {
      line-height: 1.5;
      font-size: 18px;
      font-weight: 500;
      background: #fff;
padding: 10px 5px 5px;
    margin-bottom: 0px; }
      #ratia .menuBox p.name small {
        display: block;
        font-size: 11px; }
    #ratia .menuBox .price {
      line-height: 1.35;
      padding-top: 1px; }
      #ratia .menuBox .price p {
        display: block;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        line-height: 1.35; }
        #ratia .menuBox .price p span {
  }
      #ratia .menuBox .price .icon-arrow01 {
        font-size: 10px;
        display: inline-block;
        transform: scale(0.5) rotate(90deg);
        margin: 10px; }


div.price {
background: #fff2cc;


}

p.first {
background: #ffd966;
    padding: 10px 0px;
    margin: 15px -10px 10px 10px;
    width: 70px;
    float: left;
}

.detail {
padding: 0 20px 8px 0px;
    font-size: 14px;
    color: #369BD5;
    font-weight: 600;
}

div.voice-waku {

border: solid 1px #000; 
    margin-top: 70px;
}

.voice-pic {
padding: 20px 0 0;

}

small.hosoku {
line-height: 10%;
font-size: 10px;
}
    #ratia .menuBox.border {
;
      box-sizing: border-box;
      background: #E0EDF3;
      position: relative;
 }
      #ratia .menuBox.border:before {
        content: "";
        width: calc(100% - 6px);
        height: calc(100% - 6px);
 
        position: absolute;
        left: 2px;
        top: 2px; }
    #ratia .menuBox.border + .border {
      margin-top: 50px; }
  #ratia .movie {
    padding: 20px 0; }
    #ratia .movie .youtube {
      flex-shrink: 0;
      width: 100%; }
      #ratia .movie .youtube iframe {
    width: 100%;
    height: 180px;
        vertical-align: top; }
    #ratia .movie p {
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      text-align: center;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 500;
      padding: 10px 20px 0; }
      #ratia .movie p span {
        font-size: 12px;
        font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  #ratia .sectTitle {
    padding: 12px;
    background: #000;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1.35; }
  #ratia h3.line {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    padding-bottom: 20px;
    border-bottom: #000 solid 1px;
    letter-spacing: 0;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    text-align: center; }
  #ratia .sectTitle + .inner {
    background: #fff;
    padding: 20px; }
    #ratia .sectTitle + .inner .textBox figure {
      flex-shrink: 0; }
    #ratia .sectTitle + .inner .textBox .txt {
      padding-top: 10px;
      font-size: 12px;
      line-height: 1.5; }
    #ratia .sectTitle + .inner .textBox.reverse {
      align-items: flex-start; }
      #ratia .sectTitle + .inner .textBox.reverse figure {
        order: 1; }
      #ratia .sectTitle + .inner .textBox.reverse .txt {
        order: 0;
        text-align: left; }
      #ratia .sectTitle + .inner .textBox.reverse .photo {
        order: 1;
        width: 100%;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap; }
        #ratia .sectTitle + .inner .textBox.reverse .photo figure {
          width: 50%; }
          #ratia .sectTitle + .inner .textBox.reverse .photo figure figcaption {
            text-align: center;
            padding-top: 5px; }
          #ratia .sectTitle + .inner .textBox.reverse .photo figure.wide {
            width: 100%; }
    #ratia .sectTitle + .inner .textBox + h3.line {
      margin-top: 20px; }
    #ratia .sectTitle + .inner .voice {

      padding: 80px 10px 0px 10px;
      margin-top: -20px;
      text-align: center;
      position: relative; }
      #ratia .sectTitle + .inner .voice .txt em {
        display: block;
        font-size: 15px;
        font-weight: 400;
        padding-bottom: 10px; }
      #ratia .sectTitle + .inner .voice .txt p {
        font-size: 12px; }
      #ratia .sectTitle + .inner .voice figure {
        position: absolute;
        left: calc(50% - 50px);
        top: -36px;
        flex-shrink: 0;
        width: 100px; }
  #ratia .inner + small {
    display: block;
    text-align: right;
    font-size: 10px;
    padding-top: 10px; }
  #ratia .bfBox .txt {
    padding: 10px 10px 0;
    font-size: 12px;
    text-align: center; }
    #ratia .bfBox .txt em {
      font-weight: 600;
      padding-bottom: 2em; }
  #ratia .bfBox + .bfBox {
    padding-top: 20px;
    margin-top: 20px;
    border-top: #dadada solid 1px; }
  #ratia .step0 .inner {
    background: #fff;
    padding: 20px;
    box-sizing: border-box; }
    #ratia .step0 .inner h3 {
      font-size: 15px;
      font-weight: 400;
      text-align: left;
      line-height: 1.5;
      padding-bottom: 20px; }
    #ratia .step0 .inner p {
      font-size: 12px;
      text-align: left;
      font-weight: 400; }
  #ratia .step0 .model {
    padding-top: 20px; }
    #ratia .step0 .model figure {
      width: 100px;
      margin: 0 auto; }
    #ratia .step0 .model .txt {
      text-align: center; }
      #ratia .step0 .model .txt em {
        display: block;
        font-size: 15px;
        padding: 10px; }
      #ratia .step0 .model .txt p {
        font-size: 12px;
        font-weight: 400;
        text-align: left; }
        #ratia .step0 .model .txt p br {
          display: none; }
  #ratia .step2 .line + p {
    font-size: 12px;
    text-align: left; }
  #ratia .step2 .attention {
    background: #f7f7f7;
    padding: 10px;
    display: block;
    color: #f54d80;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    margin-top: 20px; }
  #ratia .step2 .parts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    #ratia .step2 .parts .item {
      width: 50%;
      padding-top: 20px; }
      #ratia .step2 .parts .item figure figcaption {
        font-size: 12px;
        text-align: center;
        padding-top: 10px; }
  #ratia .step2 small {
    display: block;
    padding-top: 10px;
    font-size: 10px; }
  #ratia .more .menuBox {
    margin-bottom: 50px; }
  #ratia .salon {
    padding-bottom: 20px; }
    #ratia .salon h2 {
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      position: relative; }
    #ratia .salon .salonBox {
      padding-top: 20px; }
      #ratia .salon .salonBox figure {
        flex-shrink: 0; }
      #ratia .salon .salonBox .txt {
        font-size: 12px; }
        #ratia .salon .salonBox .txt em {
          display: block;
          padding-bottom: 20px;
          text-align: center;
          padding-top: 20px; }
          #ratia .salon .salonBox .txt em img {
            width: 106px;
            height: auto; }
    #ratia .salon .links {
      background: #fff;
      border: #000 solid 1px;
      margin: 20px auto 0;
      padding: 10px;
      text-align: center; }
      #ratia .salon .links em {
        font-size: 14px;
        padding-right: 25px; }
      #ratia .salon .links ul li {
        display: inline-block; }
        #ratia .salon .links ul li a {
          color: #000;
          font-size: 12px; }
      #ratia .salon .links ul li + li:before {
        content: "/";
        padding: 0 5px; }
  #ratia .btns a {
    display: inline-block;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: #f54d80 solid 1px;
    text-align: center;
    color: #f54d80;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    backface-visibility: hidden;
    margin-top: 20px; }
    #ratia .btns a:hover {
      color: #f54d80;
      border-color: #f54d80; }
			
.btn-arrow:before {
  content: "▲";
	position:absolute;
	top: 75%;
    left: 78%;
	font-weight:bold;
	font-size:180%;
	transform:rotate(90deg);
color: #369BD6;
	 }
.btn-arrow2:before {
  content: "▲";
	position:absolute;
	top: 73%;
    left: 78%;
	font-weight:bold;
	font-size:180%;
	transform:rotate(90deg);
color: #369BD6;
	 }
			 }

/******************************************************
    
PC

******************************************************/
@media screen and (min-width: 768px) {
  .sp {
    display: none; }

  .accent {
    color: #000;
    font-size: 40px;
    /* display: block; */
    vertical-align: -3px;
    font-weight: 600; }
  .contents {
    background-color: #f8f8f8;
    height: auto;
    margin: 0 auto;
    max-width: 1000px;
    width: auto;
    font-weight: 500;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000; }
    .contents img {
      vertical-align: top; }
  .switch {
    opacity: 1; }
  figure {
    max-width: 100%; }
    figure img {
      max-width: 100%;
      height: auto; }
  #ratia .pageTitle {
    background: #fff; }
    #ratia .pageTitle .inner {
      background: url(../img/title_bg01.jpg) no-repeat right center;
      background-size: auto 100%;
      height: 420px;
      width: 100%;
      padding: 50px;
      box-sizing: border-box; }
      #ratia .pageTitle .inner em {
        display: block;
        line-height: 1; }
      #ratia .pageTitle .inner small {
        display: block;
        line-height: 1;
        font-weight: bold;
        font-size: 13px;
        padding-top: 20px;
        letter-spacing: 4px; }
      #ratia .pageTitle .inner h1 {
        padding-top: 50px;
        font-size: 35px;
        font-weight: 200;
        line-height: 1.5; }
  #ratia section {
    width: 900px;
    margin: 50px auto 0;
    box-sizing: border-box; }
    #ratia section.cont01 {
      background: #fff; }
  #ratia .menuBox {
    text-align: center;
    padding: 30px;
    position: relative; }
    #ratia .menuBox a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10; 
			box-shadow:4px 4px 8px grey;}
      #ratia .menuBox a:hover ~ * {
        color: #000; }
    #ratia .menuBox a ~ * {
      transition: all 0.2s ease;
      backface-visibility: hidden; }
    #ratia .menuBox em {
      display: block;
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
padding-top: 20px;
 }
    #ratia .menuBox p.name {
      font-size: 24px;

background: #fff;
    padding: 10px 10px 5px 10px;
margin: 10px 15px -15px 15px;
 }
      #ratia .menuBox p.name small {
        font-size: 12px; }
    #ratia .menuBox .price p {
      display: inline-block;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 1px;
}
      #ratia .menuBox .price p span {
 }
    #ratia .menuBox .price .icon-arrow01 {
      font-size: 10px;
      display: inline-block;
      transform: scale(0.5); }
    #ratia .menuBox.border {
      
      box-sizing: border-box;
      background: #E0EDF3;
      position: relative;
      transition: border-color 0.2s ease;
      backface-visibility: hidden;
padding: 10px;
 }
      #ratia .menuBox.border:hover {
        border-color: #000; }
        #ratia .menuBox.border:hover:before {
          border-color: #000; }
      #ratia .menuBox.border:before {
        content: "";
        width: calc(100% - 6px);
        height: calc(100% - 6px);

        position: absolute;
        left: 2px;
        top: 2px;
        transition: border-color 0.2s ease;
        backface-visibility: hidden; }
    #ratia .menuBox.border + .border {
      margin-top: 50px; }
  #ratia .movie {
    margin: 0 50px;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #ratia .movie .youtube {
      flex-shrink: 0;
      width: 560px;
      height: 315px;
      background: #000; }
    #ratia .movie p {
      padding-left: 35px;
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: 15px;
      line-height: 1.8;
      font-weight: 500; }
      #ratia .movie p span {
        font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px; }
  #ratia .sectTitle {
    line-height: 60px;
    background: #000;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 100;
    letter-spacing: 2px; }
  #ratia h3.line {
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 20px;
    border-bottom: #000 solid 1px;
    letter-spacing: 0;
    font-feature-settings: "palt";
    margin-bottom: 40px; }
  #ratia .sectTitle + .inner {
    background: #fff;
    padding: 50px; }
    #ratia .sectTitle + .inner .textBox {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; }
      #ratia .sectTitle + .inner .textBox figure {
        flex-shrink: 0; }
      #ratia .sectTitle + .inner .textBox .txt {
        padding-left: 40px;
        font-size: 14px;
        line-height: 1.85; }
      #ratia .sectTitle + .inner .textBox.reverse {
        align-items: flex-start; }
        #ratia .sectTitle + .inner .textBox.reverse figure {
          order: 1; }
        #ratia .sectTitle + .inner .textBox.reverse .txt {
          order: 0;
          padding-left: 0;
          padding-right: 40px; }
        #ratia .sectTitle + .inner .textBox.reverse .photo {
          order: 1;
          width: 450px;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap; }
          #ratia .sectTitle + .inner .textBox.reverse .photo figure {
            width: 215px; }
            #ratia .sectTitle + .inner .textBox.reverse .photo figure figcaption {
              text-align: center;
              padding-top: 5px; }
            #ratia .sectTitle + .inner .textBox.reverse .photo figure.wide {
              width: 100%;
              padding-bottom: 20px; }
    #ratia .sectTitle + .inner .textBox + h3.line {
      margin-top: 50px; }
    #ratia .sectTitle + .inner .voice {
      display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
 }
      #ratia .sectTitle + .inner .voice .txt {
        padding-right: 40px; }
        #ratia .sectTitle + .inner .voice .txt em {
          display: block;
          font-size: 19px;
          font-weight: 400;
          padding-bottom: 10px; }
        #ratia .sectTitle + .inner .voice .txt p {
          font-size: 13px; }
      #ratia .sectTitle + .inner .voice figure {
        flex-shrink: 0; }
  #ratia .inner + small {
    display: block;
    text-align: right;
    font-size: 10px;
    padding-top: 10px; }
  #ratia .bfBox {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    #ratia .bfBox .txt {
      padding-left: 50px;
      font-size: 16px; }
      #ratia .bfBox .txt em {
        display: block;
        font-weight: 600;
        padding-bottom: 2em; }
  #ratia .bfBox + .bfBox {
    padding-top: 50px;
    margin-top: 50px;
    border-top: #dadada solid 1px; }
  #ratia .step0 .inner {
    width: 800px;
    background: #fff;
    padding: 50px;
    box-sizing: border-box;
    margin: -200px auto 0;
    position: relative;
    z-index: 10; }
    #ratia .step0 .inner h3 {
      font-size: 24px;
      font-weight: 400;
      text-align: center;
      line-height: 1.65;
      padding-bottom: 30px; }
    #ratia .step0 .inner p {
      font-size: 15px;
      line-height: 2;
      text-align: center;
      font-weight: 400; }
  #ratia .step0 .model {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px; }
    #ratia .step0 .model .txt {
      width: 500px;
      padding-left: 30px; }
      #ratia .step0 .model .txt em {
        display: block;
        font-size: 19px;
        padding-bottom: 10px; }
      #ratia .step0 .model .txt p {
        font-size: 14px;
        font-weight: 400; }
  #ratia .step2 .line + p {
    font-size: 14px;
    text-align: center; }
  #ratia .step2 .attention {
    background: #f7f7f7;
    padding: 10px 0;
    display: block;
    color: #f54d80;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    margin-top: 25px; }
  #ratia .step2 .parts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    #ratia .step2 .parts .item {
      width: 255px;
      padding-top: 30px; }
      #ratia .step2 .parts .item figure {
        position: relative; }
        #ratia .step2 .parts .item figure figcaption {
          position: absolute;
          left: 10px;
          bottom: 10px;
          font-size: 14px; }
  #ratia .step2 small {
    display: block;
    padding-top: 10px;
    font-size: 10px; }
  #ratia .more .menuBox {
    margin-bottom: 50px; }
  #ratia .salon {
    padding-bottom: 50px; }
    #ratia .salon h2 {
      text-align: center;
      font-size: 25px;
      font-weight: 400;
      position: relative; }
      #ratia .salon h2:before {
        content: "";
        width: 200px;
        height: 1px;
        background: #000;
        position: absolute;
        left: 0;
        top: 50%; }
      #ratia .salon h2:after {
        content: "";
        width: 200px;
        height: 1px;
        background: #000;
        position: absolute;
        right: 0;
        top: 50%; }
    #ratia .salon .salonBox {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding-top: 60px; }
      #ratia .salon .salonBox figure {
        flex-shrink: 0; }
      #ratia .salon .salonBox .txt {
        padding-left: 40px;
        font-size: 13px; }
        #ratia .salon .salonBox .txt em {
          display: block;
          padding-bottom: 30px; }
          #ratia .salon .salonBox .txt em img {
            width: 106px;
            height: auto; }
    #ratia .salon .links {
      width: 800px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border: #000 solid 1px;
      margin: 40px auto 0;
      padding: 15px 0; }
      #ratia .salon .links em {
        font-size: 15px;
        padding-right: 25px; }
      #ratia .salon .links ul li {
        display: inline-block; }
        #ratia .salon .links ul li a {
          color: #000;
          font-size: 13px;
          transition: all 0.2s ease;
          backface-visibility: hidden; }
          #ratia .salon .links ul li a:hover {
            color: #f54d80; }
      #ratia .salon .links ul li + li:before {
        content: "/";
        padding: 0 5px; }
  #ratia .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    margin: 20px auto; }
    #ratia .btns a {
      display: inline-block;
      padding: 15px;
      width: calc(50% - 10px);
      box-sizing: border-box;
      border: #000 solid 1px;
      text-align: center;
      color: #000;
      font-size: 15px;
      text-decoration: none;
      transition: all 0.2s ease;
      backface-visibility: hidden; }
      #ratia .btns a:hover {
        color: #f54d80;
        border-color: #f54d80; }
				
.btn-arrow:before {
  content: "▲";
	position:absolute;
    top: 75%;
    left: 63%;
    font-weight: bold;
    font-size: 300%;
	transform:rotate(90deg);
color: #369BD6;
	 }

.btn-arrow2:before {
  content: "▲";
	position:absolute;
    top: 71%;
    left: 63%;
    font-weight: bold;
    font-size: 300%;
	transform:rotate(90deg);
color: #369BD6;
	 }
				
  .sp {
    display: none !important; }

div.price {
background: #fff2cc;
    margin: 15px;
    padding-top: 20px;
}

p.first {
background: #ffd966; 
    padding: 10px 20px;
margin-right: 10px;
}

.detail {
    padding: 5px;
    font-size: 24px;
    color: #369BD5;
    font-weight: 600;
}

div.voice-waku {
padding: 0 40px 30px; 
border: solid 1px #000; 
margin-top: 40px;
}

.voice-pic {
padding: 20px 0 10px;
    padding-left: 20%;
}

 }

/*# sourceMappingURL=style.map */