@charset "utf-8";
/* CSS Document */

/*全体*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Sorts+Mill+Goudy&display=swap');

:root {
   --blue: #3978ce;
   --gold: #ae8c43;
}

.morocco {
   width: 100%;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 400;
   color: #4d4d4d;
   letter-spacing: 0.05em;
   line-height: 1.5;
}

.serif-en {
   font-family: "Sorts Mill Goudy", serif;
}

.serif-jp {
   font-family: "Shippori Mincho B1", serif;
}

a {
   text-decoration: none;
   transition: 0.3s;
}

a:hover {
   opacity: 0.7;
   ;
}

.float-l {
   float: left
}

.float-r {
   float: right;
}

.clearfix:after {
   content: "";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}

.flex {
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -ms-flex-pack: justify;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}

.pc {
   display: none;
}

img {
   vertical-align: bottom;
   max-width: 100%;
}

/* メインビジュアル */
.morocco-main {
   background-image: url(../images/morocco/main-bg.jpg);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: top center;
   height: 140vw;
   text-align: center;
   position: relative;
}

.morocco-main__copy {
   padding: 50vw 0 0;
   color: #fff;
}

.p_page .morocco-main__copy h1 {
   font-size: 13vw;
   letter-spacing: 0.02em;
   line-height: 1;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   margin: -3vw 0 2vw;
   font-weight: 500;
}

.morocco-main__copy h1 span {
   font-size: 6vw;
}

.morocco-main__img1 img {
   width: 45vw;
}

.p_page .morocco .morocco-h1__subttl {
   font-size: 3.6vw;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   margin-bottom: 5vw;
   letter-spacing: 0.1em;
}

.morocco-main__img2 {
   width: 33vw;
   position: absolute;
   top: 18vw;
   right: 0;
}

.morocco-main__img2 img {
   width: 100%;
}

.morocco__btn1 {
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   bottom: 12vw;
}

.morocco__btn1 a {
   background-color: #6f9ddc;
   color: #fff;
   width: 80vw;
   display: inline-block;
   font-size: 3.8vw;
   padding: 2vw 0 2.5vw;
   border-radius: 7px;
   border-bottom: solid 5px #3978ce;
   background-image: url(../images/morocco/arrow1.svg);
   background-repeat: no-repeat;
   background-size: 1.8vw auto;
   background-position: 97% 50%;
   font-weight: 600;
}

.morocco__btn1 a:hover {
   border: none;
   margin-top: 5px;
}

/* モロッコってどんな国 */
.p_page .morocco p {
   font-size: 16px;
   margin: 0;
}

.p_page .morocco h2 {
   text-align: center;
   font-family: "Shippori Mincho B1", serif;
   font-size: 26px;
   color: var(--blue);
   margin-bottom: 30px;
   letter-spacing: 0.05em;
   font-weight: bold;
}

.morocco section:nth-child(n+2) {
   padding: 50px 0;
}

.morocco-map {
   background-color: #dee9f7;
}

.morocco-map__img1 {
   margin-bottom: 30px;
}

.morocco-map__img1 img {
   border-radius: 20px;
}

.morocco .inner {
   padding: 0 30px;
}

.morocco p {
   line-height: 1.8;
}

/* おすすめ観光地 */

.morocco-sightseeing .flex {
   align-items: stretch;
   margin-bottom: 30px;
}

.morocco-sightseeing__img {
   width: 50%;
   position: relative;
}

.morocco-sightseeing__img .img {
   border-radius: 0 15px 15px 0;
   object-fit: cover;
   height: 100%;
   max-height: 65vw;
}

.morocco-sightseeing__img .icon {
   position: absolute;
   top: 0;
   left: 10px;
   width: 60px;
}

.morocco-sightseeing__img .icon img {
   border-radius: 0;
}

.morocco-sightseeing__txt {
   width: 50%;
   padding-right: 30px;
}

.p_page p.morocco-sightseeing__ttl {
   color: var(--blue);
   font-family: "Shippori Mincho B1", serif;
   font-size: 18px;
   font-weight: bold;
   letter-spacing: 0;
   border-bottom: solid 1px var(--blue);
   padding: 0 0 5px 20px;
   margin-bottom: 10px;
}

.p_page p.morocco-sightseeing__comment {
   padding-left: 20px;
   font-size: 14px;
}

.morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__txt {
   padding: 0 0 0 30px;
}

.morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__ttl {
   padding: 0 20px 5px 0;
}

.morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__comment {
   padding: 0 20px 0 0;
}

.morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__img .img {
   border-radius: 15px 0 0 15px;
}

.morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__img .icon {
   left: auto;
   right: 10px;
}

/* 砂漠 */
.morocco section.morocco-desert {
   background-image: url(../images/morocco/desert-bg.jpg);
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-color: #f3e9d8;
   padding: 80px 0 50px;
}

.p_page .morocco-desert h2 {
   color: var(--gold);
   margin-bottom: 20px;
}

.p_page .morocco h3 {
   text-align: center;
   font-family: "Shippori Mincho B1", serif;
   font-size: 22px;
   color: var(--gold);
   letter-spacing: 0.05em;
   font-weight: bold;
   background-image: url(../images/morocco/desert-ttl1.svg);
   background-repeat: no-repeat;
   background-position: top center;
   background-size: auto 100%;
   padding: 10px 0;
   margin-bottom: 5px;
}

.p_page .morocco .morocco-desert .flex-pc__inner:nth-child(2) h3 {
   background-image: url(../images/morocco/desert-ttl2.svg);
   margin-top: 20px;
}

.morocco-desert__img {
   margin-bottom: 10px;
   text-align: center;
}

.morocco-desert__img img {
   border-radius: 10px;
}

/* アクティビティ */
.morocco-activity {
   background-image: url(../images/morocco/activity-bg.jpg);
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: 100% auto;
}

.p_page .morocco-activity h2 {
   color: var(--gold);
}

.p_page .morocco-activity p.morocco-sightseeing__ttl {
   color: var(--gold);
   border-bottom: solid 1px var(--gold);
   line-height: 1.4;
}

.morocco-activity .flex {
   margin-bottom: 30px;
}

.morocco-activity .flex:nth-child(even) .morocco-sightseeing__txt {
   padding: 0 0 0 30px;
}

.morocco-activity .flex:nth-child(even) .morocco-sightseeing__ttl {
   padding: 0 20px 5px 0;
}

.morocco-activity .flex:nth-child(even) .morocco-sightseeing__comment {
   padding: 0 20px 0 0;
}

.morocco-activity .flex:nth-child(even) .morocco-sightseeing__img .img {
   border-radius: 15px 0 0 15px;
}

.morocco-activity .morocco-sightseeing__img .img {
   max-height: 45vw;
}

.p_page .morocco-activity h3 {
   text-align: left;
   background-image: url(../images/morocco/icon2.svg);
   background-position: left 50%;
   background-size: 50px auto;
   padding-left: 55px;
   margin: 40px 0 5px;
   font-weight: bold;
}

/* 各都市の移動距離 */
.morocco-city__img {
   margin-bottom: 20px;
}

/* リヤド */
.morocco-riad {
   background-image: url(../images/morocco/riad-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: top center;
   color: #fff;
}

.p_page .morocco-riad h2 {
   color: #fff;
}

.morocco-riad__img {
   margin-bottom: 20px;
   text-align: center;
}

.morocco-riad__img img {
   border-radius: 10px;
}

/* 天気・気候・服装の目安 */
.morocco-guideline ul {
   margin-bottom: 50px;
}

.morocco-guideline li {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 48%;
   height: calc(48vw - 30px);
   text-align: center;
   color: #fff;
   font-family: "Shippori Mincho B1", serif;
   font-size: 3.5vw;
   background-size: 100% 100%;
}

.p_page .morocco-guideline li p {
   line-height: 1.5;
   font-size: 3.5vw;
}

.morocco-guideline li span {
   font-size: 2.5vw;
}

.morocco-guideline li:nth-child(1) {
   background-image: url(../images/morocco/guideline-img1.png);
   margin-bottom: 4%;
}

.morocco-guideline li:nth-child(2) {
   background-image: url(../images/morocco/guideline-img2.png);
   margin-bottom: 4%;
}

.morocco-guideline li:nth-child(3) {
   background-image: url(../images/morocco/guideline-img3.png);
}

.morocco-guideline li:nth-child(4) {
   background-image: url(../images/morocco/guideline-img4.png);
}

.p_page p.morocco-guideline__caution {
   background-color: #dee9f7;
   padding: 20px 20px 20px calc(40px + 6%);
   background-image: url(../images/morocco/icon3.svg);
   background-repeat: no-repeat;
   background-size: 40px;
   background-position: 4% 50%;
   margin-bottom: 10px;
}

/* 食事・雑貨 */
.morocco-meal {
   background-image: url(../images/morocco/meal-bg.jpg);
   background-size: 100% 100%;
}

.p_page .morocco-meal h2 {
   color: var(--gold);
   margin-bottom: 10px;
}

.p_page .morocco-meal h2+p {
   text-align: center;
   margin-bottom: 30px;
}

.morocco-meal dl {
   width: 48%;
   margin-bottom: 30px;
}

.morocco-meal__img {
   text-align: center;
}

.morocco-meal__img img {
   border-radius: 10px;
}

.morocco p.morocco-meal__ttl {
   text-align: center;
   color: var(--gold);
   font-family: "Shippori Mincho B1", serif;
   font-weight: 600;
   font-size: 20px;
   margin: 15px 0 5px;
   line-height: 1;
}

.morocco-meal dd {
   font-size: 14px;
}

.morocco-meal .flex:nth-child(5) dl {
   margin-bottom: 20px;
}

/* クーポン */
.morocco-coupon {
   background-image: url(../images/morocco/coupon-bg.jpg);
   background-size: cover;
   background-position: top center;
   color: #fff;
}

.p_page .morocco-coupon h2 {
   color: #fff;
   font-size: 32px;
   line-height: 1.4;
}

.morocco-coupon h2 span {
   font-size: 20px;
}

.morocco-coupon01 {
   width: 50%;
   height: 42vw;
   background-image: url(../images/morocco/coupon-img1.png);
   background-size: 100% 100%;
   position: relative;
}

.morocco-coupon02 {
   width: 50%;
   height: 42vw;
   background-image: url(../images/morocco/coupon-img2.png);
   background-size: 100% 100%;
   position: relative;
}

.p_page .morocco-coupon01 p,
.p_page .morocco-coupon02 p {
   color: var(--gold);
   text-align: center;
   position: absolute;
   top: 29vw;
   width: 100%;
   line-height: 1.3;
   font-size: 2vw;
   margin: 0;
}

.morocco-coupon01 p span,
.morocco-coupon02 p span {
   font-weight: bold;
   font-size: 2.5vw;
}

.morocco p.morocco-coupon__txt1 {
   text-align: center;
   line-height: 1.5;
   margin: 20px auto 20px;
   background-image: url(../images/morocco/icon4.svg), url(../images/morocco/icon5.svg);
   background-repeat: no-repeat;
   background-position: left bottom, right bottom;
   background-size: 35px auto;
   padding: 0 50px;
   max-width: 380px;
}

.morocco-coupon__txt1 span {
   font-weight: bold;
}

.p_page .morocco h4 {
   font-weight: bold;
   margin-top: 30px;
   display: flex;
   align-items: center;
   font-size: 16px;
}

.morocco h4::after {
   content: "";
   height: 1px;
   border-top: 1.5px dotted #fff;
   flex-grow: 1;
}

.morocco h4::after {
   margin-left: 15px;
}

.morocco-coupon .morocco__btn1 {
   position: relative;
   text-align: center;
   bottom: auto;
}

.morocco-coupon .morocco__btn1 a {
   background-color: var(--gold);
   border-bottom: solid 5px #907000;
   transition: none;
}

.morocco-coupon .morocco__btn1 a:hover {
   border: none;
}

.p_page .morocco-coupon ul {
   list-style: disc;
   padding-left: 25px;
   margin: 0 !important;
}

.morocco-coupon li {
   margin-bottom: 5px;
   font-size: 14px;
}

/* レビュー */
.p_page .morocco-review h2 {
   color: var(--gold);
}

.morocco-review dl {
   background-color: #f3e9d8;
   border-radius: 10px;
   padding: 20px;
   margin-bottom: 15px;
}

.morocco-review dt {
   background-image: url(../images/morocco/arrow6.svg);
   background-repeat: no-repeat;
   background-size: 30px;
   background-position: 100% 40%;
   transition: 0.3s;
}

.morocco-review dt.active {
   background-image: url(../images/morocco/arrow2.svg);
   margin-bottom: 10px;
}

.morocco-review dt:hover {
   cursor: pointer;
   opacity: 0.7;
}

.morocco-review dt .flex {
   justify-content: flex-start;
}

.morocco p.morocco-review__star {
   color: var(--gold);
   font-size: 20px;
   margin-right: 10px;
   line-height: 1;
   margin-bottom: 5px;
}

.morocco p.morocco-review__date {
   line-height: 1.4;
   color: var(--gold);
   font-size: 14px;
}

.morocco p.morocco-review__ttl {
   font-weight: bold;
   padding-right: 40px;
   line-height: 1.5;
}

.morocco-review dd {
   display: none;
   text-align: justify;
}

.morocco-review dt.active dd {
   display: block;
}

.morocco-btn2 {
   text-align: center;
   margin-top: 20px;
}

.morocco-btn2 a {
   color: var(--gold);
   font-weight: bold;
}

.morocco-btn2 img {
   width: 25px;
   margin-left: 7px;
}

/* プラン */
.morocco-plan {
   background-image: url(../images/morocco/plan-bg.jpg);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.morocco-plan .slider-card {
   background-color: #fff;
   border-radius: 15px;
}

.morocco-plan dd {
   padding: 10px 20px 20px;
}

.p_page p.morocco-plan__ttl {
   font-weight: bold;
   margin-bottom: 10px;
   line-height: 1.5;
}

.morocco p.morocco-plan__price {
   line-height: 1.5;
   margin-bottom: 5px;
}

.morocco p.morocco-plan__day {
   line-height: 1.5;
}

.morocco-plan__price img,
.morocco-plan__day img {
   width: 20px;
   margin-right: 7px;
   display: inline;
}

.morocco-plan .morocco-btn2 a {
   color: var(--blue);
}

.morocco-plan .slick-slide {
   margin: 10px;
}

.morocco .next-arrow {
   right: 0;
}

.morocco .prev-arrow {
   left: 0;
   z-index: 1;
}

.morocco .slide-arrow {
   width: 60px;
   top: 150px;
}

/* フッター */
.page-id-18108 .l_footer {
   margin-bottom: 0;
}

/*------------------------------------------------------------
ここから PC 用
-------------------------------------------------------------*/
@media screen and (min-width:768px) {
   .pc {
      display: block;
   }

   img.pc {
      display: inline;
   }

   .sp {
      display: none;
   }

   /* PC：メインビジュアル */
   .morocco-main {
      background-image: url(../images/morocco/main-bg_pc.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
      height: 650px;
      text-align: center;
      position: relative;
   }

   .morocco-main__img2 {
      width: 230px;
      top: 40px;
      right: min(10vw, 10px);
   }

   .morocco-main__copy {
      padding: 120px 0 0;
      color: #fff;
   }

   .morocco-main__img1 img {
      width: 250px;
   }

   .p_page .morocco-main__copy h1 {
      font-size: 80px;
      margin: -10px 0 0;
      line-height: 1.05;
   }

   .morocco-main__copy h1 span {
      font-size: 40px;
   }

   .p_page .morocco .morocco-h1__subttl {
      font-size: 24px;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      margin-bottom: 5vw;
      letter-spacing: 0.1em;
   }

   .morocco__btn1 {
      bottom: 70px;
   }

   .morocco__btn1 a {
      width: 650px;
      display: inline-block;
      font-size: 24px;
      padding: 15px 0;
      border-radius: 7px;
      background-size: 10px auto;
   }

   /* PC：どんな国 */

   .p_page .morocco h2 {
      font-size: 28px;
   }

   .morocco .inner {
      max-width: 1000px;
      margin: 0 auto;
   }

   .p_page .morocco {
      font-size: 30px;
   }

   .morocco-map__img1 {
      float: left;
      width: 48%;
   }

   .morocco-map p {
      float: right;
      width: 48%;
   }

   .morocco-map .inner:after {
      content: "";
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
   }

   /* PC：おすすめ観光地 */
   .morocco-sightseeing {
      max-width: 1000px;
      margin: 0 auto;
   }

   .morocco-sightseeing,
   .morocco-activity {
      width: 100%;
   }

   .morocco-sightseeing .flex,
   .morocco-activity .flex {
      width: 48%;
   }

   .morocco-sightseeing__img .img,
   .morocco-activity__img .img {
      border-radius: 15px !important;
   }

   .morocco-sightseeing .flex:nth-child(even) .morocco-sightseeing__img,
   .morocco-activity .flex:nth-child(even) .morocco-sightseeing__img {
      order: -1;
   }

   .morocco-sightseeing__txt {
      padding: 0 !important;
      width: 50%;
   }

   .morocco-sightseeing__ttl {
      padding: 0 0 5px 20px !important;
   }

   .morocco-sightseeing__comment {
      padding-left: 20px !important;
   }

   .morocco-sightseeing__img .icon {
      left: 10px !important;
   }

   .morocco-sightseeing__img .img {
      height: 240px;
   }

   /* PC：砂漠 */
   .morocco section.morocco-desert {
      background-image: url(../images/morocco/desert-bg_pc.jpg);
      padding: 100px 0 50px;
   }

   .flex-pc {
      display: -ms-flexbox;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
   }

   .flex-pc__inner {
      width: 48%;
   }

   .p_page .morocco .morocco-desert .flex-pc__inner:nth-child(2) h3 {
      margin-top: 0.7em;
   }

   /* PC：アクティビティ */
   .morocco section:nth-child(n+2).morocco-activity {
      background-image: url(../images/morocco/activity-bg_pc.jpg);
      padding: 50px 0 70px;
   }

   .morocco-activity .flex-pc {
      max-width: 1000px;
      margin: 0 auto;
   }

   /* PC：移動時間 */
   .morocco-city .flex-pc {
      align-items: center;
   }

   .morocco-city .flex-pc__inner {
      width: 40%;
   }

   .morocco-city .flex-pc__inner.morocco-city__img {
      width: 60%;
   }

   /* PC：リヤド */
   .morocco-riad .flex-pc__inner {
      width: 35%;
   }

   .morocco-riad .flex-pc__inner.morocco-riad__img {
      width: 60%;
   }

   /* PC：服装の目安 */
   .morocco-guideline li {
      width: 24%;
      height: 230px;
      font-size: 20px;
   }

   .morocco-guideline li span {
      font-size: 16px;
   }

   .p_page .morocco-guideline li p {
      font-size: 18px;
   }

   /* PC：食事・雑貨 */
   .morocco-meal {
      background-image: url(../images/morocco/meal-bg_pc.jpg);
      background-size: 100% 100%;
   }

   .p_page .morocco-meal h2 {
      margin-bottom: 30px;
   }

   .morocco-meal dl {
      width: 31%;
      margin-bottom: 30px;
   }

   /* PC：クーポン */
   .p_page .morocco-coupon h2 {
      font-size: 38px;
      margin-bottom: 20px;
   }

   .p_page .morocco-coupon h2 span {
      font-size: 24px;
   }

   .morocco-coupon01,
   .morocco-coupon02 {
      width: 50%;
      height: 450px;
   }

   .p_page .morocco-coupon01 p,
   .p_page .morocco-coupon02 p {
      top: 312px;
      font-size: 20px;
      margin: 0;
   }

   .morocco-coupon01 p span,
   .morocco-coupon02 p span {
      font-size: 26px;
   }

   .morocco p.morocco-coupon__txt1 {
      margin: 10px auto 20px;
      font-size: 18px;
      max-width: 530px;
   }

   .morocco-coupon .morocco__btn1 {
      margin-bottom: 50px;
   }

   .morocco-coupon li {
      font-size: 16px;
   }

   /* PC：レビュー */
   .morocco-review dl {
      padding: 25px;
   }

   .morocco p.morocco-review__ttl {
      font-size: 18px;
   }

   /* PC：プラン */
   .morocco-plan {
      background-image: url(../images/morocco/plan-bg_pc.jpg);
      background-size: 100% auto;
      background-color: #dee9f7;
   }
}

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

   .morocco-coupon01,
   .morocco-coupon02 {
      width: 50%;
      height: 42vw;
   }

   .p_page .morocco-coupon01 p,
   .p_page .morocco-coupon02 p {
      top: 29vw;
      font-size: 2vw;
   }

   .morocco-coupon01 p span,
   .morocco-coupon02 p span {
      font-size: 2.5vw;
   }

   .morocco-guideline li {
      width: 48%;
      height: calc(48vw - 30px);
      font-size: 3.5vw;
   }
}