@charset "utf-8";


/* style.css */

/*
//  PC or more /////////////////////////////////////////////
*/

/* --------------------------------------------------------
  html
-------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 62.5%;
  overflow-y: scroll;
}


/* --------------------------------------------------------
  body
-------------------------------------------------------- */

body {
  font-size: 14px;
  font-size: 1.4rem;
}


/* --------------------------------------------------------
  meta
-------------------------------------------------------- */

div.meta {
  margin: 20px auto;
  width: 1100px;
}

div.meta:after {
  content: "";
  clear: both;
  display: block;
}

div.meta ul.snsList {
  float: right;
  width: 122px;
}

div.meta ul.snsList li {
  float: left;
  width: 36px;
}

div.meta ul.snsList li + li {
  margin-left: 7px;
}

div.meta ul.snsList li img {
  width: 100%;
  height: auto;
}

div.meta div.update {
  float: right;
  margin: 5px 20px 5px 0;
  line-height: 22px;
}

.arrow_box {
  float: left;
  position: relative;
  background: #f7d94f;
  padding: 0 10px;
  font-size: 10px;
  font-size: 1.0rem;
  font-weight: bold;
  line-height: 26px;
  letter-spacing: 0;
  color: #fff;
}

.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(247, 217, 79, 0);
  border-left-color: #f7d94f;
  border-width: 3px;
  margin-top: -3px;
}

div.meta div.update time {
  padding-left: 15px;
  line-height: 26px;
}


/* --------------------------------------------------------
  main
-------------------------------------------------------- */

main {
  clear: both;
  display: block;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  box-sizing: border-box;
  margin: 0 auto 30px;
  padding-bottom: 40px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main:after {
  content: " ";
  display: block;
  clear: both;
}


/* img //////////*/
main img { width: 100%; height: auto;}

/* mainVisual ///////////////*/
div.mainVisual img { display: block; margin: 0 auto;  width: 1100px;}


/* lead ///////////////*/
.lead { color: #042e61; margin: 30px auto 40px; max-width: 1100px; text-align: center;}
.lead p { margin-bottom: 1.0em; font-size: 16px;}
.lead h2 {
  background: url(../img/bg_h2.png) no-repeat center bottom;
  background-size: 53px;
  font-size: 48px;
  margin-bottom: 20px;
  padding-bottom: 10px; 
  text-align: center;
}
.lead h2 img { display: block; margin: 0 auto; max-width: 280px;}

/* Contents ///////////////*/
*{ box-sizing: border-box;}
.contents-oyatsu-wrap {
  background: url(../img/bg_main.jpg) repeat left top;
  background-size: 500px;
  padding: 40px 0;
}
.contents-oyatsu-wrap figure { margin: 0;}
/* oyatsu common style */
.pc { display: block;}
.sp { display: none;}
.icon-pickup,
.icon-main,
.icon-subl,
.icon-subr { position: absolute;}

.icon-pickup { left: -20px; max-width: 26%; top: -10px; z-index: 2;}
.icon-main { left: -20px; max-width: 188px; top: -50px; z-index: 2;}
.icon-subl { left: -30px; max-width: 35%; top: -25px; z-index: 2;}
.icon-subr { max-width: 35%; right: -30px; top: -25px; z-index: 2;}

.txt-spot-wrap strong { background: #fff; color: #c32228; padding: 5px;}
.txt-spot-wrap span { padding-left: 5px;}
.cont-flxl-wrap, .cont-flxr-wrap { display: flex; flex-wrap: wrap;}
.cont-flxl-wrap figure, .cont-flxr-wrap figure { position: relative; width: 55%;}
.cont-flxr-wrap { flex-direction: row-reverse;}
.cont-flxr-wrap .cont-oyatsu-txt { padding: 0 2.4% 0 0;}
.cont-oyatsu-txt {
  font-size: 18px;
  padding-left: 2.4%;
  text-align: center;
  width: 45%;
}
.cont-oyatsu-txt h4, .cont-oyatsu-txt p { color: #042e61; letter-spacing: 0; text-align: left;}
.txt-spot-wrap {
  background: #c32228;
  border: 1px solid #c32228;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  padding: 5px 5px 5px 0;
}

/* oyatsu min wrap */
.cont-oyatsu-min { margin: 40px auto 0;}
.cont-oyatsu-min figure { line-height: 1.4em; padding-left: 4%; text-align: left;}
.cont-oyatsu-min figure figcaption { padding-top: 10px;}
.cont-oyatsu-min.cont-flxl-wrap figure { padding: 0 4% 0 0; width: 53%;}
/* info */
.cont-info-wrap h5 {
  margin-bottom: 8px;
  text-align: center;
}
.cont-info-wrap h5 img { width: 24%;}
.cont-info-wrap ul { border: 1px solid #042e61; background: #fff; font-size: 15px; padding: 15px;}
.cont-info-wrap ul li {
  border-bottom: 1px solid #e3e3e3;
  color: #042e61;
  display: flex;
  margin-bottom: 10px;
  padding: 0 0 10px;
}
.cont-info-wrap ul li a { color: #c32228; text-decoration: underline;}
.cont-info-wrap ul li i { font-size: 18px;}
.cont-info-wrap ul li:last-child { border-bottom: none; margin-bottom: 0;}
.cont-info-wrap ul li span {
  background: #042e61;
  color: #fff;
  display: block;
  font-size: 14px;
  height: 100%;
  text-align: center;
  width: 18%;
}
.cont-info-wrap ul li p { padding-left: 2%; text-align: left; width: 82%;}
.cont-flxl-wrap .cont-oyatsu-txt h4 { font-size: 24px; margin: .5em auto;}

/* oyatsu main contents */
.contents-oyatsu-wrap .cont-oyatsu-main {
  background: url(../img/bg_maincont.jpg) no-repeat left top;
  background-size: cover;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 10px;
  position: relative;
  text-align: center;
}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-main-inner { background: #fff; padding: 55px 20px 40px;}
.contents-oyatsu-wrap .cont-oyatsu-main h3 { color: #c32228; font-size: 36px; line-height: 1.2em;}
.contents-oyatsu-wrap .cont-oyatsu-main h3 rt { font-size: 15px; font-weight: normal;}
.contents-oyatsu-wrap .cont-oyatsu-main .txt-spot-wrap {  margin: 30px auto;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx { padding-left: 4%; width: 53%;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx p { color: #042e61; padding-top: 10px; text-align: left;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx ul { display: flex; justify-content: space-between;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx ul.ph-flx-01 li { width: 49%;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx ul.ph-flx-02 li:first-child { width: 60%;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx ul.ph-flx-02 li:last-child { width: 38%;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .cont-info-wrap { width: 47%;}
/* oyatsu sub contents */
.contents-oyatsu-wrap .cont-oyatsu-sub {
  background: url(../img/bg_line.png) repeat-x left top;
  background-size: 25px;
  max-width: 1024px;
  margin: 0 auto 60px;
  padding: 65px 30px 50px;
  position: relative;
  text-align: center;
}
.contents-oyatsu-wrap .cont-oyatsu-sub h3 { color: #c32228; font-size: 32px; line-height: 1.2em;}
.contents-oyatsu-wrap .cont-oyatsu-sub h3 rt { font-size: 12px; font-weight: normal;}
.contents-oyatsu-wrap .cont-oyatsu-sub .txt-spot-wrap { background: #c32228; border: 1px solid #c32228; color: #fff; margin: 10px auto 20px;}
.contents-oyatsu-wrap .cont-oyatsu-sub .txt-spot-wrap strong { color: #c32228; }
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-info-wrap ul { font-size: 12px;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt { font-size: 16px;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt h4 { font-size: 22px; margin-bottom: 20px;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-min figure { width: 46%;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-min .cont-info-wrap { width: 54%;}

.contBnrWrap { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; max-width: 1040px; margin: 0 auto;}
.contBnrWrap li { padding: 5px; width: 80%;}
.contBnrWrap .pc { display: block !important; }
.contBnrWrap .sp { display: none !important; }

.cont-oyatsu-books {
  background: url(../img/bg_book.png) repeat left top;
  background-size: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  max-width: 1028px;
  padding: 40px;
}
.cont-oyatsu-books h4 { margin-bottom: 15px; text-align: center; width: 100%;}
.cont-oyatsu-books h4 img { margin: 0 auto; width: 40%;}
.cont-oyatsu-books figure { padding: 10px; text-align: center; width: 24%;}
.cont-oyatsu-books figure figcaption { color: #042e61; line-height: 1.4em; padding-top: 10px;}
.cont-oyatsu-books figure:nth-child(2) { margin-right: 4%;}

/* cation */
.contCation { font-size: 12px; padding-top: 10px;}

/* map */
iframe { display: block; max-width: 1024px; margin: 0 auto;}

/* copy */
.cont-issue-stxt {
  line-height: 1.4em;
  max-width: 1024px;
  margin: 20px auto 40px;
}
.cont-issue-stxt p {
  font-size: 12px;
  margin: 0 0 .5em 1em;
  padding: 0;
  text-indent: -1em;
}
.cont-issue-stxt a { color: #d8171c;}

/*
//  PC or Tablet 1200px ///////////////////////////////////
*/
@media screen and (max-width: 1200px) {}

/*
//  1100px and below ///////////////////////////////////
*/

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

  /* --------------------------------------------------------
    meta
  -------------------------------------------------------- */
  div.meta { width: 100%;}
  div.meta ul.snsList { margin-right: 10px;}
  /* --------------------------------------------------------
    main
  -------------------------------------------------------- */
  main { margin: 0; width: 100%;}
}

/*
//  959px and below ///////////////////////////////////
*/

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

  /* --------------------------------------------------------
    meta
  -------------------------------------------------------- */
  div.meta ul.snsList li img { width: 100%; height: auto;}
  .mainInner { padding: 0 2%;}
  .aboutList p { min-height: 14em;}

/* Contents ///////////////*/
}

@media screen and (max-width: 768px) {
/* common */
.pc { display: none;}
.sp { display: block; width: 100%;}

.icon-pickup { left: 30px; max-width: 30%; top: 1px;}
.icon-main { left: -50px; max-width: 32%; top: -20px;}
.icon-subl { left: -30px; max-width: 30%; top: -30px;}
.icon-subr { right: -30px; max-width: 30%; top: -30px;}

.cont-info-wrap ul li span { font-size: 13px; width: 30%;}
.cont-info-wrap ul li p { width: 70%;}
.cont-oyatsu-txt { width: 100%;}
.cont-flxl-wrap figure, .cont-flxr-wrap figure { margin: 0 auto; width: 75%;}

/*main*/
.contents-oyatsu-wrap .cont-oyatsu-main { margin: 0 2% 60px;}
.contents-oyatsu-wrap .cont-oyatsu-main h3 { padding-top: .9em;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-txt h4,
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt h4
 { margin: 15px auto 10px; text-align: center;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-info-wrap ul { font-size: 13px;}

.contBnrWrap li { padding: 5px; width: 80%;}
.contBnrWrap .pc { display: none !important; }
.contBnrWrap .sp { display: block !important; }


.cont-oyatsu-books {
  margin: 20px 2%;
  padding: 40px;
}

/* copy */
.cont-issue-stxt { padding: 0 2%;}
}

/*
//  SmartPhone 639px and below //////////////////////////////
*/

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

  /* --------------------------------------------------------
    body
  -------------------------------------------------------- */
  body { font-size: 1.3rem; word-wrap: break-word; overflow-wrap: break-word;}

/* --------------------------------------------------------
  meta
-------------------------------------------------------- */
  div.meta { margin: 15px 0;}
  div.meta div.update { float: left; margin: 5px 0 5px 10px;}

/* --------------------------------------------------------
  main
-------------------------------------------------------- */

/* lead ///////////////*/
.lead { margin: 20px 2% 30px;}
.lead h2 { font-size: 24px;}
.lead h2 img { display: block; margin: 0 auto; width: 50%;}
.lead p { font-size: 14px; text-align: left;}
.mainInner { padding: 0 2%;}


/* --------------------------------------------------------
  contents
-------------------------------------------------------- */
/* project */
.contents-oyatsu-wrap { padding: 0 0 40px;}

.icon-pickup { left: 5px; max-width: 40%; top: 5px;}
.icon-main { left: -10px; max-width: 40%; top: -20px;}
.icon-subl { left: -10px; max-width: 35%; top: -20px;}
.icon-subr { right: -10px; max-width: 35%; top: -20px;}

.contents-oyatsu-wrap .cont-oyatsu-main {  margin: 0 2% 40px;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-main-inner {  padding: 40px 10px 10px;}
.contents-oyatsu-wrap .cont-oyatsu-sub { border-width: 2px; margin: 0 2% 20px; padding: 30px 10px 20px;}
.cont-flxl-wrap, .cont-flxr-wrap { display: block;}
.cont-flxl-wrap figure, .cont-flxr-wrap figure { width: 100%;}
.cont-oyatsu-txt { padding: 0; width: 100%;}
.cont-oyatsu-min.cont-flxl-wrap figure { width: 100;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .ph-flx,
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-min figure { padding: 0 0 20px; width: 100%;}
/*info*/
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-min .cont-info-wrap,
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-min .cont-info-wrap { width: 100%;}
.cont-info-wrap ul li span { font-size: 12px;}
.cont-info-wrap h5 img { width: 35%;}
/*main*/
.contents-oyatsu-wrap .cont-oyatsu-main h3 { font-size: 25px; padding-top: 1.8em;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-txt h4 { font-size: 18px; line-height: 1.4em; margin: 20px auto;}
.contents-oyatsu-wrap .cont-oyatsu-main .txt-spot-wrap { margin: 10px auto 20px;}
.contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-txt { font-size: 16px;}
/*sub*/
.contents-oyatsu-wrap .cont-oyatsu-sub h3 { font-size: 26px;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt h4 { font-size: 18px; line-height: 1.4em; margin: 20px auto;}
.contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt { font-size: 14px;}

/* bnr */
.contBnrWrap li { width: 80%;}
.contBnrWrap .pc { display: none !important; }
.contBnrWrap .sp { display: block !important; }

.cont-oyatsu-books { padding: 30px 10px 20px;}
.cont-oyatsu-books h4 { margin: 0 auto 10px; width: 100%;}
.cont-oyatsu-books h4 img { width: 80%;}
.cont-oyatsu-books figure { text-align: center; width: 49%;}
.cont-oyatsu-books figure:nth-child(2) { margin-right: 0;}
.cont-oyatsu-books figure figcaption { line-height: 1.4em; padding-top: 10px;}
}
/*
//  SmartPhone 320px and below //////////////////////////////
*/

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


  /* --------------------------------------------------------
    meta
  -------------------------------------------------------- */
  div.meta ul.snsList {
    float: right;
    width: 94px;
  }

  div.meta ul.snsList li {
    float: left;
    width: 28px;
  }

  div.meta ul.snsList li + li {
    margin-left: 5px;
  }

  div.meta div.update {
    margin: 2px 0 2px 10px;
  }

  .arrow_box {
    padding: 0 8px;
  }

  div.meta div.update time {
    padding-left: 12px;
    line-height: 24px;
    font-size: 1.2rem;
  }
  .contents-oyatsu-wrap .cont-oyatsu-main h3 { font-size: 21px;}
  .contents-oyatsu-wrap .cont-oyatsu-sub h3 { font-size: 22px;}
  .contents-oyatsu-wrap .cont-oyatsu-main .cont-oyatsu-txt h4 { font-size: 18px; line-height: 1.2em;}
  .contents-oyatsu-wrap .cont-oyatsu-sub .cont-oyatsu-txt h4 { font-size: 16px; line-height: 1.2em;}

}