@charset "UTF-8";
/**************** CSS ****************************/
body, #contents.sp_item {
  background: #f7f4ef;
}
footer {
  background: #f7f4ef;
}
/*********key******/
#contents.sp_item .key {
  position: relative;
  background: #fef1d9 url("../img/iwate_bg.jpg") repeat-y;
}
/*********co_11******/
#contents.sp_item .co_11 {
  background: #fef1d9 url("../img/mottoro_bg.gif");
  background-size: calc(100vw / (1200 / 56)) auto;
  padding-bottom: calc(100vw / (1200 / 50));
}
#contents.sp_item .co_11 h2 {
  width: calc(100vw / (1200 / 400));
  margin: 0 auto;
  padding: calc(100vw / (1200 / 30)) 0;
}
#contents.sp_item .co_11 .box {
  width: calc(100vw / (1200 / 1000));
  margin-bottom: calc(100vw / (1200 / 50));
  padding-bottom: calc(100vw / (1200 / 10));
  background: #080300;
  position: relative;
  color: #fff;
  line-height: calc(100vw / (1200 / 35));
  font-size: calc(100vw / (1200 / 18));
}
#contents.sp_item .co_11 .box01 {
  margin-left: calc(100vw / (1200 / 200));
  border-radius: 20px 0 0 20px;
}
#contents.sp_item .co_11 .box02 {
  margin-right: calc(100vw / (1200 / 200));
  border-radius: 0 20px 20px 0;
}
#contents.sp_item .co_11 .box .img {
  width: calc(100vw / (1200 / 400));
}
#contents.sp_item .co_11 .box .txt {
  width: calc(100vw / (1200 / 550));
}
#contents.sp_item .co_11 .box01 .txt {
  padding-right: calc(100vw / (1200 / 80));
}
#contents.sp_item .co_11 .box02 .txt {
  padding-left: calc(100vw / (1200 / 60));
}
#contents.sp_item .co_11 .box h3 {
  margin: calc(100vw / (1200 / 10));
  font-size: calc(100vw / (1200 / 27));
}
/*********co_12******/
#contents.sp_item .co_12 {
  background: #fef1d9 url("../img/mottoro_bg.gif");
  background-size: calc(100vw / (1200 / 56)) auto;
  padding-bottom: calc(100vw / (1200 / 50));
}
#contents.sp_item .co_12 h2 {
  width: calc(100vw / (1200 / 270));
  margin: 0 auto calc(100vw / (1200 / 35));
}
#contents.sp_item .co_12 .kikan {
  position: relative;
  margin-bottom: calc(100vw / (1200 / 50));
}
#contents.sp_item .co_12 .kikan .img {
  width: calc(100vw / (1200 / 500));
  margin: 0 auto calc(100vw / (1200 / 10));
}
#contents.sp_item .co_12 .kikan p {
  margin: 0 auto;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  font-size: calc(100vw / (1200 / 24));
  color: #33336d;
}
#contents.sp_item .co_12 .kikan p span {
  font-size: calc(100vw / (1200 / 35));
}
#contents.sp_item .co_12 .item01 {
  width: calc(100vw / (1200 / 1000));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
#contents.sp_item .co_12 .item01 li {
  width: 48%;
  margin: 0 auto calc(100vw / (1200 / 20));
}
#contents.sp_item .co_12 h3 {
  margin: calc(100vw / (1200 / 60)) auto calc(100vw / (1200 / 25));
  text-align: center;
  font-size: calc(100vw / (1200 / 24));
}
#contents.sp_item .co_12 .item02 {
  width: calc(100vw / (1200 / 1000));
  margin: 0 auto calc(100vw / (1200 / 100));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contents.sp_item .co_12 .item02 li {
  width: 24%;
}
#contents.sp_item .co_12 .btn {
  margin: 0 auto calc(100vw / (1200 / 50));
}
/*********co_21******/
#contents.sp_item .co_21 {
  margin: 0 0 calc(100vw / (1200 / 75));
  background: #0a2836;
}
#contents.sp_item .co_21 h2 {
  margin: 0 auto calc(100vw / (1200 / 20));
}
#contents.sp_item .co_21 .sub {
  width: calc(100vw / (1200 / 400));
  margin: 0 auto;
  margin-bottom: calc(100vw / (1200 / 100));
}
#contents.sp_item .co_21 .box {
  width: 100%;
  margin-top: calc(100vw / (1200 / 25));
  padding-bottom: calc(100vw / (1200 / 25));
  position: relative;
  color: #fff;
  line-height: calc(100vw / (1200 / 27));
  font-size: calc(100vw / (1200 / 18));
}
#contents.sp_item .co_21 .box .box_in {
  width: calc(100vw / (1200 / 640));
  padding-right: calc(100vw / (1200 / 20));
  padding-left: calc(100vw / (1200 / 100));
}
#contents.sp_item .co_21 .box .img {
  width: calc(100vw / (1200 / 550));
}
#contents.sp_item .co_21 .box h3 {
  margin: 0 auto calc(100vw / (1200 / 20));
  padding-bottom: calc(100vw / (1200 / 10));
  border-bottom: 1px solid #dfcd92;
  text-align: center;
  font-size: calc(100vw / (1200 / 39));
  font-weight: normal;
  color: #dfcd92;
}
#contents.sp_item .co_21 .box p.read {
  margin-bottom: calc(100vw / (1200 / 26));
  padding: calc(100vw / (1200 / 10)) 0;
  background: url("../img/mottoro_c21_read.jpg") no-repeat;
  background-size: 100% auto;
  text-align: center;
  font-size: calc(100vw / (1200 / 26));
  color: #000;
}
#contents.sp_item .co_21 .box .txt {}
#contents.sp_item .co_21 .algnR {
  padding-bottom: calc(100vw / (1200 / 50));
  color: #fff;
  font-size: calc(100vw / (1200 / 13));
}
/*********co_22******/
#contents.sp_item .co_22 h2 {
  width: calc(100vw / (1200 / 270));
  margin: 0 auto calc(100vw / (1200 / 35));
}
#contents.sp_item .co_22 .kikan {
  position: relative;
  margin-bottom: calc(100vw / (1200 / 50));
}
#contents.sp_item .co_22 .kikan .img {
  width: calc(100vw / (1200 / 500));
  margin: 0 auto calc(100vw / (1200 / 10));
}
#contents.sp_item .co_22 .kikan p {
  margin: 0 auto;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  font-size: calc(100vw / (1200 / 24));
  color: #33336d;
}
#contents.sp_item .co_22 .kikan p span {
  font-size: calc(100vw / (1200 / 35));
}
#contents.sp_item .co_22 .item01 {
  width: calc(100vw / (1200 /1150));
  margin: 0 auto calc(100vw / (1200 / 25));
  padding-bottom: calc(100vw / (1200 / 25));
  flex-wrap: wrap;
}
#contents.sp_item .co_22 .item01 li {
  width: calc(100vw / (1200 / 370));
  margin: 0 auto calc(100vw / (1200 / 25));
}
#contents.sp_item .co_22 .btn {
  margin: 0 auto calc(100vw / (1200 / 50));
}
/********************** btnarea **********************/
#contents.sp_item .btnarea {
  padding-bottom: calc(100vw / (1200 / 200)) !important;
  padding-top: calc(100vw / (1200 / 50)) !important;
}
/*****btnarea****/
#contents.sp_item .atn {
  width: calc(100vw / (1200 / 600));
  margin: 0 auto calc(100vw / (1200 / 100));
  line-height: 1.5;
  font-size: calc(100vw / (1200 /15));
}
#contents.sp_item .atn li {
  margin-bottom: 1em;
  padding-left: 2em;
  position: relative;
}
#contents.sp_item ul.atn li a {
  text-decoration: underline;
}
#contents.sp_item .atn li::before {
  content: "※";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
#contents.sp_item .cv {
  padding-bottom: calc(100vw / (1200 / 100));
}
#contents.sp_item .cv .btn {
  margin: 0 auto calc(100vw / (1200 / 100));
}
#contents.sp_item .cv .bn_goto {
  width: calc(100vw / (1200 /550));
  margin: 0 auto calc(100vw / (1200 / 200));
}
#contents.sp_item .cv .button {
  width: calc(100vw / (1200 / 220));
  height: calc(100vw / (1200 / 220));
  position: fixed;
  bottom: calc(100vw / (1200 / 10));
  right: calc(100vw / (1200 / 1));
  background: #000;
  padding: 0;
  z-index: 999;
  animation-name: fadeUpApp;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpApp {
  from {
    opacity: 0;
    transform: translateY(300px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}