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

/* base-link
====================================*/
#pageTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 10;
}
#pageTop a .fa.fa-angle-up:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: calc(18px + 0.25%);
  line-height: 1rem;
  border-radius: 100px;
  background: rgba(183, 162, 83, 0.7);
  z-index: 20;
  color: #fff;
  text-decoration: none;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/*　共有 style
====================================*/
.flex-Box {
  display: flex;
}
.pc-mode {
  display: block;
}
.sp-mode {
  display: none;
}

/* Font Awesome
====================================*/
.fa-angle-right {
  margin-right: 10px;
}

/* Google Font
====================================*/

.gf-PLUS {font-family: 'M PLUS 1p', sans-serif;}
.gf-Rounded {font-family: 'M PLUS Rounded 1c', sans-serif;}

/* タイトル周り　デザイン
-------------------------*/
.h1-main-title {
  position: absolute;
  top: 10%;
  left: 4%;
  z-index: 20;
  -webkit-transform: translate(0%, -50%); /* Safari用 */
  transform: translate(0%, -50%);
  color: #534741;
  font-size: calc(28px + 0.25%);
  font-weight: bold;
  text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.title-ruby {
  position: absolute;
  top: 14%;
  left: 4%;
  z-index: 10;
  color: #534741;
  font-size: calc(16px + 0.25%);
  font-weight: bold;
  text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.cross-Box h2 {
  text-align: center;
  font-size: calc(32px + 0.25vw);
  line-height: calc(3.2rem + 0.25vw);
  letter-spacing: 14px;
  color: #314249;
}
.cross-Box h3 {
  text-align: center;
  font-size: calc(22px + 0.25vw);
  line-height: calc(2.2rem + 0.25vw);
  font-weight: bold;
  letter-spacing: 14px;
  color: #314249;
  margin: 30px 0 0;
}

/* header-style
----------------------------------*/
.header-wrap {
  width: 100%;
  background: url(../images/header-bg.jpg);
  position: relative;
  /*margin-bottom: 30px;*/
}
.header-Block {
  max-width: 1170px;
  width: 100%;
  margin: auto;
}

/* crossword-style
----------------------------------*/
.crossword-wrap {
  width: 100%;
  border-top: solid 1px #dfe4e6;
  background: #f6f6f5;
  padding: 30px 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.crossword-wrap .cross-Box {
  max-width: 1170px;
  width: 100%;
  margin: auto;
  color: #6f7a7f;
  padding: 30px 0 50px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
p.lead-copy {
  text-align: center;
  font-size: calc(18px + 0.25vw);
  font-weight: 500;
  line-height: calc(1.8rem + 0.25vw);
  letter-spacing: 1.5px;
  margin: 20px 0 0;
}
p.b-copy {
  text-align: center;
  font-size: calc(12px + 0.25vw);
  line-height: calc(1.2rem + 0.25vw);
  margin: 5px 0 0;
}
div.answer-Box {
  max-width: 450px;
  width: 100%;
  margin: 20px auto 50px;
  align-items: flex-start;
  justify-content: center;
}
div.answer-Box p {
  border: dotted 1px #787878;
  max-width: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 0 0;
  padding: 15px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
  font-weight: bold;
  color: #FF5722;
}
div.answer-Box p:last-child {
  margin-right: 0;
}
.crossword-area {
  max-width: 900px;
  width: 100%;
  margin: auto;
}
.flex-Box.crossword-area div {
    width: 50%;
    margin-right: 40px;
}
.crossword-area div ul {
  color: #333;
}
.crossword-area div ul li {
  margin: 0 0 20px;
}
.crossword-area div ul li:last-child {
  margin: 0;
}
.crossword-area div ul li ol li {
  margin: 0;
}
li strong.crossword-keytitle {
  font-size: calc(16px + 0.25vw);
  line-height: calc(1.6rem + 0.25vw);
}

/* wrap 関連
-------------------------*/

/* レイアウト 関連
-------------------------*/



/* カート 関連
-------------------------*/


/* スライダーカスタマー
===================================*/

/* アコーディオンstyle
===================================*/

/* 動きを付ける
-----------------*/

/* フッターメニュー
-------------------------*/


/* ブレイクポイント
-------------------------*/
@media screen and (max-width: 1076px) {

/* レイアウト 関連
-------------------------*/

/* wrap 関連
-------------------------*/

/* カート 関連
-------------------------*/

}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 860px) {
/* レイアウト 関連
-------------------------*/

/* wrap 関連
-------------------------*/

/* カート 関連
-------------------------*/

}
@media screen and (max-width: 768px) {
/*　共有 style
====================================*/
.flex-Box {
  display: block;
}
/* crossword-style
----------------------------------*/
.crossword-area {
  max-width: 600px;
  width: 100%;
}
.flex-Box.crossword-area div {
    width: 100%;
    margin: 20px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* レイアウト 関連
-------------------------*/

/* カート 関連
-------------------------*/

}
@media screen and (min-width: 660px) {
}
@media screen and (max-width: 660px) {
/*　共有 style
====================================*/

.pc-mode {
  display: none;
}
.sp-mode {
  display: block;
}
.topGroupName {
  margin: 0;
  padding: 0;
}
/* crossword-style
----------------------------------*/
.crossword-wrap {
  padding: 0;
}
.cross-Box h2 {
  font-size: calc(24px + 0.25vw);
  line-height: calc(2.4rem + 0.25vw);
  letter-spacing: 2px;
}
p.lead-copy {
  font-size: calc(14px + 0.25vw);
  line-height: calc(1.4rem + 0.25vw);
  letter-spacing: 1.0px;
  margin: 10px 0 0;
}
div.answer-Box {
  margin: 20px auto 30px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.crossword-area {
  padding: 0 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
}
@media screen and (max-width: 375px) {
/* crossword-style
----------------------------------*/
.cross-Box h2 {
  font-size: calc(20px + 0.25vw);
  line-height: calc(2.0rem + 0.25vw);
  letter-spacing: 2px;
}
}