@charset "UTF-8";

/* 関数定義 =============================================================================== */
:root {
  --base-color: #E4F0FB;
  --text-color: #082554;
  --main-color: #34BFFF;
  --sub-color: #54C4D8;
  --accent-color: #FFEE31;
}

/* jQuery =============================================================================== */

/* フェードイン - 上から */
.fadeInTop {
  transform: translate3d(0, -10px, 0);
  transition: 1.0s;
  opacity: 0;
}
.fadeInTop.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* フェードイン - 右から */
.fadeInRight {
  transform: translate3d(30px, 0, 0);
  transition: 1.0s;
  opacity: 0;
}
.fadeInRight.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* フェードイン - 左から */
.fadeInLeft {
  transform: translate3d(-30px, 0, 0);
  transition: 1.0s;
  opacity: 0;
}
.fadeInLeft.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* フェードイン - スタイル01 */
.fadeInEach01 {
  transform: translate3d(0, -15px, 0);
  transition: 1.5s;
  opacity: 0;
}
.fadeInEach01.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* フェードイン - スタイル02 */
.fadeInEach02 {
  transform: translate3d(0, -15px, 0);
  transition: 1.5s;
  opacity: 0;
}
.fadeInEach02.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* フェードイン - スタイル03 */
.fadeInEach03 {
  transform: translate3d(0, -15px, 0);
  transition: 1.5s;
  opacity: 0;
}
.fadeInEach03.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* PC
=============================================================================== */
body {
  background-color: var(--base-color);
}
main {
  overflow-x: hidden;
  color: var(--text-color);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.060em;
}

.bread-crumb {
  width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.bread-crumb li {
  font-size: 14px;
  line-height: 15.4px;
}
img {
  vertical-align: top;
}
.isPc {
  display: block;
}
.isSP {
  display: none;
}
.br-pc {
  display: block;
}
.br-sp {
  display: none;
}
.text-small {
  font-size: small;
}
.strikethrough {
  text-decoration: line-through;
  text-decoration-color: var(--text-color);
}

/* MAIN-VISUAL
================================================================ */
.mv {
  width: 1240px;
  margin:0 auto 45px;
}

/* MAIN-CONTENT
================================================================ */
.main-content {
  width: 100%;
  font-family: "Noto Sans JP", Arial, Helvetica, sans-serif;
}
.main-content_container {
  width: 100%;
}

/* コンテンツタイトル */
.contentTitle {
  width: 100%;
  margin: 60px auto 30px;
  text-align: center;
  font-family: "Roboto", "Noto Sans JP",Arial, Helvetica, sans-serif;
}
.contentTitle-main {
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 0.20em;
}
.contentTitle-detail {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.25em;
  color: var(--sub-color);
}
.contentTitle-detailY {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.25em;
  color: var(--accent-color);
}

/* about_フォーエルのスーツのこだわり
================================================================ */
.about {
  max-width: 1240px;
  margin: 60px auto;
}
.about-inner {
  display: flex;
  position: relative;
}
.about-image {
  width: 60%;
}
.about-text {
  position: absolute;
  top: 35%;
  left: 50%;
  padding-right: 60px;
}
.about-text_main {
  display: block;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.20em;
  margin-bottom: 30px;
}
.about-text_mainSP {
  display: none;
}
.about-text_detail {
  font-size: 20px;
  letter-spacing: 0.20em;
  line-height: 2.3;
}

/* features_こだわりスーツの特徴
================================================================ */
.features {
  background-color: var(--sub-color);
}
.features-inner {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0 30px;
}
.features-mainImage {
  width: 840px;
  margin: 30px auto 60px;
}
.pointList {
  display: flex;
  flex-wrap: wrap;
}
.pointList-item {
  display: flex;
  width: calc((1040px - 20px)/ 2);
  margin-bottom: 45px;
}
.pointList-item:nth-child(even) {
  margin-left: 20px;
}
.pointList-item_image {
  width: 180px;
  height: 180px;
}
.pointList-item_text {
  padding: 20px 0 0 10px;
}
.point-title {
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
.point-detail {
  line-height: 1.5;
}

/* dressing_着こなしポイント
================================================================ */
.dressing {
  margin-bottom: 100px;
}
.dressing-inner {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.dressing-image {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* pickUpStyle_PICK UP STYLE
================================================================ */
.pickUpStyle {
  margin: 0 auto 100px;
}
.PUstyle {
  margin-bottom: 60px;
}
.PUstyle-main {
  position: relative;
  margin-bottom: 45px;
}
.PUstyle-main_inner {
  width: 1040px;
  margin: 0 auto;
  position: relative;
}
.PUstyle-main_number {
  width: 200px;
  position: absolute;
  top: -20px;
  left: -10%;
}
.PUstyle-main_number.even {
  top: -20px;
  left: auto;
  right: -10%;
}
.PUstyle-main_flex {
  width: 100%;
  margin: 0 auto;
  padding-top: 45px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.PUstyle-main_flex.even {
  flex-direction: row-reverse;
}
.PUstyle-main_image > picture {
  width: 50%;
}
.PUstyle-main_text {
  width: 50%;
}
.PUstyle-main_bg {
  width: 92%;
  height: 500px;
  background: url(../images/PUstyle-main_bg_pc.png) left top / cover;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.PUstyle-main_bg.even {
  left: auto;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.style-name {
  margin-bottom: 15px;
  font-size: 28px;
  font-weight: bold;
}
.style-price {
  margin-bottom: 15px;
  font-size: 28px;
}
.style-detail {
  line-height: 2.0;
}

.PUstyle-textbox {
  width: 850px;
  margin: 0 auto 30px;
  border: solid var(--main-color) 2px;
  background: #fff;
}
.PUstyle-textbox_inner {
  padding: 20px 30px;
}
.PUstyle-textbox_lead {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.PUstyle-textbox_lead::before {
  content: "";
  display: block;
  width: 8px;
  height: 30px;
  background-color: var(--main-color);
  margin-right: 10px;
}

/* 商品ピック */
.productList {
  max-width: 1040px;
  margin:0 auto 45px;
  display: flex;
  justify-content: center;
}
.productItem {
  width: calc((1040px - 75px) / 4);
  margin-right: 25px;
}
.productItem:last-child {
  margin-right: 0;
}
.productItem-image {
  margin-bottom: 15px;
}
.productItem-text {
  font-size: 15px;
  letter-spacing: 0.025em;
  line-height: 1.5;
}
.product-name {
  height: 45px;
  margin-bottom: 15px;
}
.product-price {
  height: 20px;
  color: #FF4D4D;
  font-size: 18px;
}
.product-price.strikethrough {
  margin-bottom: 0;
  color: var(--text-color);
  font-size: 14px;
}
.productBtn {
  margin-top: 30px;
}
.productBtn > a {
  display: block;
  width: 100%;
  padding: 5px;
  text-align: center;
  color: var(--base-color);
  background-color: var(--main-color);
  border: solid 2px var(--main-color);
  border-radius: 5px;
}
.productBtn > a:hover {
  color: var(--main-color);
  background-color: var(--base-color);
  border: solid 2px var(--main-color);
  text-decoration: none;
}

.styleBtn > a {
  display: block;
  width: 500px;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  color: var(--base-color);
  background-color: var(--text-color);
  border: solid 2px var(--text-color);
  border-radius: 5px;
}
.styleBtn > a:hover {
  color: var(--text-color);
  background-color: var(--base-color);
  border: solid 2px var(--text-color);
  text-decoration: none;
}

/* recommend_おすすめアイテム
================================================================ */
.recommend {
  margin-bottom: 100px;
}
.recommend-inner {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.recommendList {
  display: flex;
  flex-wrap: wrap;
}
.recommendItem {
  width: calc((1040px - 20px) / 2);
  margin-bottom: 30px;
  box-shadow: 0px 5px 15px 0px #e6f1f3;
}
.recommendItem:nth-child(even) {
  margin-left: 20px;
}

/* campaign_実店舗キャンペーン
================================================================ */
.campaign {
  margin-bottom: 100px;
}
.campaign-image {
  display: block;
  width: 650px;
  margin: 0 auto 30px;
}
.campaign-linkBtn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 650px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  background-color: #003686;
  color: #fff!important;
  border-radius: 80px;
  font-size: 20px;
}
.campaign-linkBtn_link::before {
  content: "";
  background: url(../images/icon_mappin.png) no-repeat center / cover;
  width: 34px;
  height: 42px;
  margin-right: 10px;
}
.campaign-linkBtn_link:hover {
  text-decoration: none;
}

/* information_お役立ち情報
================================================================ */
.information {
  margin-bottom: 100px;
}
.information-inner {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.informationList {
  display: flex;
  justify-content: space-between;
}
.informationItem {
  width: calc((1040px - 30px) / 2);
  margin-right: 30px;
}
.informationItem:last-child {
  margin-right: 0;
}

/* puFeature_おすすめ特集
================================================================ */
.puFeature {
  margin-bottom: 100px;
}
.puFeature-inner {
  width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.puFeature-list {
  display: flex;
  justify-content: space-between;
}
.puFeature-item {
  width: calc((100% - 45px) / 4);
}
.puFeature-item > a:hover {
  text-decoration: none;
}

/* linkLadies_レディースはこちら
================================================================ */
.linkLadies {
  margin-bottom: 100px;
}
.linkLadies-inner {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.linkLadies-btn {
  width: 530px;
  margin-left: auto;
  margin-right: auto;
}


/* LINK-BTN
================================================================ */
.linkBtn {
  width: 1040px;
  height: 60px;
  margin: 0 auto;
}
.linkBtn a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 60px;
  border-radius: 30px;
  padding-top: 10px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.linkBtn a::before {
  position: absolute;
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  top: 0;
  bottom: 0;
  margin: auto;
  right: 34px;
  transition-duration: 0.3s;
  z-index: 1;
}
.linkBtn.isMens a {
  line-height: 40px;
  background: #72d8c7;
  font-size: 16px;
}
.linkBtn.isLadies a {
  background: #72d8c7;
  line-height: 40px;
  font-size: 16px;
}
.linkBtn.isLadies.green
 a {
  background: #009B0F;
}
.linkBtn.isLadies.main-color
 a {
  background: var(--main-color);
}


/* SP
=============================================================================== */
@media screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }
  .pcOnly {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  main {
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.125em;
  }
  
  .spOnly {
    display: block;
  }
  .pcOnly {
    display: none;
  }
  .bread-crumb li {
    font-size: 10px;
  }
  .isPc {
    display: none;
  }
  .isSP {
    display: block;
  }
  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }  

  /* main-visual
  ================================================================ */
  .mv {
    width: 100%;
    margin:0 auto 45px;
  }

  /* main-content */
  .main-content {
    width: 100%;
  }

  /* MAIN-CONTENT
================================================================ */
    
  /* コンテンツタイトル */
  .contentTitle {
    width: 100%;
    margin: 30px auto 20px;
  }
  .contentTitle-main {
    font-size: 28px;
    letter-spacing: 0.125em;
  }
  .contentTitle-detail {
    font-size: 14px;
    letter-spacing: 0.175em;
    line-height: 1.5;
  }
  .contentTitle-detailY {
    font-size: 14px;
    letter-spacing: 0.175em;
    line-height: 1.5;
  }

  /* about_フォーエルのスーツのこだわり
  ================================================================ */
  .about {
    width: 100%;
    margin: 45px auto;
  }
  .about-inner {
    display: flex;
    position: static;
    flex-direction: column;
    padding: 0 15px;
  }
  .about-image {
    width: 100%;
    margin-bottom: 20px;
  }
  .about-text {
    position: static;
    padding-right: 0;
  }
  .about-text_main {
    display: none;
  }
  .about-text_mainSP {
    display: block;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.175em;
    margin-bottom: 0;
  }
  .about-text_detail {
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 2.0;
  }
  
  /* features_こだわりスーツの特徴
  ================================================================ */
  .features-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px;
  }
  .features-mainImage {
    width: 100%;
    margin: 30px auto 60px;
  }
  .pointList {
    display: flex;
    flex-direction: column;
  }
  .pointList-item {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
  }
  .pointList-item:nth-child(even) {
    margin-left: 0;
  }
  .pointList-item_image {
    width: 130px;
    height: 130px;
  }
  .pointList-item_text {
    padding: 10px 0 0 15px;
  }
  .point-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
  }
  .point-detail {
    line-height: 1.2;
  }
    
  /* dressing_着こなしポイント
  ================================================================ */
  .dressing {
    margin-bottom: 45px;
  }
  .dressing-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .dressing-image {
    width: 100%;
    margin: 45px auto;
  }

  /* pickUpStyle_PICK UP STYLE
  ================================================================ */
  .pickUpStyle {
    margin: 0 auto 60px;
  }
  .PUstyle {
    margin: 60px auto;
    margin-bottom: 60px;
  }
  .PUstyle-main {
    position: relative;
    margin-bottom: 30px;
  }
  .PUstyle-main_inner {
    width: 100%;
  }
  .PUstyle-main_number {
    width: 140px;
    position: absolute;
    top: -15px;
    left: 15px;
  }
  .PUstyle-main_number.even {
    top: -15px;
    left: auto;
    right: 15px;
  }
  .PUstyle-main_flex {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .PUstyle-main_flex.even {
    flex-direction: column;
  }
  .PUstyle-main_image {
    margin-bottom: 15px;
  }
  .PUstyle-main_image > picture {
    width: 100%;
  }
  .PUstyle-main_text {
    width: 100%;
  }
  .PUstyle-main_bg {
    width: 100%;
    height: 650px;
    background: url(../images/PUstyle-main_bg_sp.png) left top / cover;
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    z-index: -1;
  }
  .PUstyle-main_bg.even {
    left: auto;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  .style-name {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
  }
  .style-price {
    margin-bottom: 5px;
    font-size: 22px;
  }
  .style-detail {
    line-height: 1.2;
  }

  .PUstyle-textbox {
    width: 92%;
  }
  .PUstyle-textbox_inner {
    padding: 15px 20px;
  }
  .PUstyle-textbox_lead {
    font-size: 17px;
    margin-bottom: 5px;
  }
  .PUstyle-textbox_lead::before {
    content: "";
    display: block;
    width: 7px;
    height: 25px;
    margin-right: 5px;
  }

  /* 商品ピック */
  .productList {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .productItem {
    width: calc((100% - 10px) / 2);
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .productItem:nth-child(even) {
    margin-right: 0;
  }
  .productItem-image {
    margin-bottom: 10px;
  }
  .productItem-text {
    font-size: 14px;
    letter-spacing: 0.020em;
    line-height: 1.3;
  }
  .product-name {
    height: 50px;
    margin-bottom: 10px;
  }
  .product-price {
    height: 15px;
    font-size: 17px;
  }
  .product-price.strikethrough {
    font-size: 12px;
  }
  .productBtn {
    margin-top: 20px;
  }
  .productBtn > a {
    display: block;
    width: 100%;
    padding: 7px 0;
    text-align: center;
    color: var(--base-color);
    background-color: var(--main-color);
    border: none;
    border-radius: 5px;
  }
  .productBtn > a:hover {
    color: var(--base-color);
    background-color: var(--main-color);
    border: none;
    text-decoration: none;
  }

  .styleBtn {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .styleBtn > a {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
    color: var(--base-color);
    background-color: var(--text-color);
    border: none;
    border-radius: 5px;
  }
  .styleBtn > a:hover {
    color: var(--base-color);
    background-color: var(--text-color);
    border: none;
    text-decoration: none;
  }

  /* recommend_おすすめアイテム
  ================================================================ */
  .recommend {
    margin-bottom: 45px;
  }
  .recommend-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .recommendList {
    display: flex;
    flex-wrap: wrap;
  }
  .recommendItem {
    width: calc((100% - 10px) / 2);
    margin-bottom: 20px;
    box-shadow: 0px 5px 10px 0px #e6f1f3;
  }
  .recommendItem:nth-child(even) {
    margin-left: 10px;
  }

  /* campaign_実店舗キャンペーン
  ================================================================ */
  .campaign {
    margin-bottom: 45px;
  }
  .campaign-inner {
    padding: 0 15px;
  }
  .campaign-image {
    width: 100%;
    margin: 0 auto 20px;
  }
  .campaign-linkBtn_link {
    width: 100%;
    height: 60px;
    font-size: 18px;
  }
  .campaign-linkBtn_link::before {
    content: "";
    background: url(../images/icon_mappin.png) no-repeat center / cover;
    width: 25px;
    height: 30px;
    margin-right: 8px;
  }
    
  /* information_お役立ち情報
  ================================================================ */
  .information {
    margin-bottom: 45px;
  }
  .information-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .informationList {
    display: flex;
    flex-direction: column;
  }
  .informationItem {
    width: 330px;
    margin: 0 auto 15px;
  }
  .informationItem:last-child {
    margin: 0 auto 15px;
  }

  /* puFeature_おすすめ特集
  ================================================================ */
  .puFeature {
    margin-bottom: 45px;
  }
  .puFeature-inner {
    width: 100%;
    padding: 0 15px;
  }
  .puFeature-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .puFeature-item {
    width: calc((100% - 10px) / 2);
    margin-bottom: 15px;
  }
  .puFeature-item_text {
    margin-top: 5px;
    font-size: 14px;
    letter-spacing: 0.005em;
  }

  /* linkLadies_レディースはこちら
  ================================================================ */
  .linkLadies {
    margin-bottom: 45px;
  }
  .linkLadies-inner {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .linkLadies-title {
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.150em;
  }
  .linkLadies-btn {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }


  /* LINK-BTN */
  .linkBtn-container {
    padding: 0 15px;
  }
  .linkBtn {
    width: 100%;
    margin: 0 auto;
  }
  .linkBtn a {
    margin-top: 30px;
    padding-top: 10px;
    font-size: 24px;
  }
  .linkBtn a::before {
    right: 18px;
  }
  .linkBtn a:active {
    opacity: 0.7;
  }
}