@charset "UTF-8";
/* Scss Document */
/*=============================================================
 レイアウトベーススタイル
=============================================================*/
.com_toggle.faq01 .js-toggle-tit {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: relative;
  font-size: 120%; }
  .com_toggle.faq01 .js-toggle-tit:before {
    content: "";
    display: inline-block;
    margin-right: 1em; }
  .com_toggle.faq01 .js-toggle-tit i {
    margin-right: 0.5em;
    color: #FF0F13; }
.com_toggle.faq01 .js-toggle-content {
  padding: 1em; }

.temp_modal01 {
  position: relative;
  z-index: 1; }
  .temp_modal01 .inBox {
    border: none !important;
    text-align: center;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    position: relative;
    width: 50%;
    box-sizing: border-box;
    position: relative;
    margin: 0 !important;
    overflow: hidden; }
    @media print, screen and (min-width: 767.9px) {
      .temp_modal01 .inBox {
        width: 20%;
        flex-flow: nowrap; } }
    @media screen and (max-width: 767.9px) {
      .temp_modal01 .inBox:nth-child(3) {
        width: 100%; } }
    .temp_modal01 .inBox .img {
      width: 100%;
      position: relative;
      transition: 1s all; }
      .temp_modal01 .inBox .img:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        transition: 1s all; }
      .temp_modal01 .inBox .img img {
        width: 100%;
        height: 30vw;
        max-height: 500px;
        object-fit: cover;
        box-sizing: border-box; }
    .temp_modal01 .inBox figcaption {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 2vw;
      box-sizing: border-box;
      transition: 1s all;
      opacity: 0.15; }
      .temp_modal01 .inBox figcaption:before {
        content: "";
        display: block;
        width: 90%;
        height: 90%;
        border: 1px solid #fff;
        position: absolute;
        top: 5%;
        left: 5%; }
      .temp_modal01 .inBox figcaption span {
        display: block; }
    .temp_modal01 .inBox a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .temp_modal01 .inBox a span {
        display: none; }
    .temp_modal01 .inBox:hover .img {
      transform: scale(1.2);
      transition: 1s all; }
      .temp_modal01 .inBox:hover .img:before {
        background-color: rgba(0, 0, 0, 0.8);
        transition: 1s all; }
    .temp_modal01 .inBox:hover figcaption {
      opacity: 1;
      transition: 1s all; }

.temp_modal02 {
  position: relative;
  z-index: 1; }
  .temp_modal02 .inBox {
    border: none !important;
    text-align: center;
    position: relative;
    width: 50%;
    box-sizing: border-box;
    position: relative;
    margin: 0 !important;
    overflow: hidden;
    background-color: #fff; }
    @media print, screen and (min-width: 767.9px) {
      .temp_modal02 .inBox {
        width: 25%; } }
    @media print, screen and (min-width: 767.9px) {
      .temp_modal02 .inBox:nth-child(odd) {
        background-color: rgba(220, 220, 220, 0.2); } }
    .temp_modal02 .inBox .img {
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden; }
      .temp_modal02 .inBox .img:after {
        content: "";
        display: block;
        width: 0px;
        height: 5px;
        background-color: #6bfffc;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: 1s all; }
      .temp_modal02 .inBox .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-sizing: border-box;
        transition: 1s all;
        opacity: 0.8;
        position: relative; }
    .temp_modal02 .inBox figcaption {
      padding: 1vw;
      text-align: left;
      box-sizing: border-box;
      transition: 1s all; }
      .temp_modal02 .inBox figcaption b {
        font-weight: normal; }
    .temp_modal02 .inBox a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .temp_modal02 .inBox a span {
        display: none; }
    .temp_modal02 .inBox:hover .img img {
      transform: scale(1.2);
      transition: 1s all;
      opacity: 1.0; }
    .temp_modal02 .inBox:hover .img:after {
      content: "";
      display: block;
      width: 100%;
      height: 5px;
      background-color: #3a39d3;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: 1s all; }

.temp_modal03 {
  position: relative;
  z-index: 1; }
  .temp_modal03 .inBox {
    border: none !important;
    text-align: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-color: #fff; }
    @media print, screen and (min-width: 767.9px) {
      .temp_modal03 .inBox {
        width: 25%; } }
    @media print, screen and (min-width: 767.9px) {
      .temp_modal03 .inBox:nth-child(odd) {
        background-color: rgba(220, 220, 220, 0.2); } }
    .temp_modal03 .inBox .img {
      width: 100%;
      height: 150px;
      position: relative;
      overflow: hidden;
      transition: 1s all;
      padding: 0 !important;
      margin: 0 !important;
      /*&:after {
      	content: "";
      	display: block;
      	width: 0px;
      	height: 5px;
      	background-color: rgba(107,255,252,1.00);
      	position: absolute;
      	bottom:0;
      	left:0;
      	transition:1s all;
      }*/ }
      @media print, screen and (min-width: 767.9px) {
        .temp_modal03 .inBox .img {
          height: 200px; } }
      .temp_modal03 .inBox .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-sizing: border-box;
        transition: 1s all;
        opacity: 0.8;
        position: relative; }
    .temp_modal03 .inBox figcaption {
      text-align: left;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      padding: 2vw;
      opacity: 0;
      transition: 1.5s all;
      display: none;
      color: #000; }
      .temp_modal03 .inBox figcaption span {
        display: block;
        margin-bottom: 1em; }
        .temp_modal03 .inBox figcaption span.more {
          border: 1px solid #ccc;
          width: auto;
          font-size: 80%;
          padding: 0.2em 1em;
          border-radius: 95px;
          text-align: center;
          width: 150px;
          max-width: 100%;
          margin-top: 1em; }
    .temp_modal03 .inBox a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .temp_modal03 .inBox a span {
        display: none; }
    .temp_modal03 .inBox:hover {
      text-align: left; }
      @media print, screen and (min-width: 767.9px) {
        .temp_modal03 .inBox:hover {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          background-color: #fff; } }
      .temp_modal03 .inBox:hover .img {
        position: relative;
        z-index: 2;
        width: 50%;
        transition: 1s all; }
        .temp_modal03 .inBox:hover .img img {
          /*transform: scale(1.2);*/
          opacity: 1.0; }
        .temp_modal03 .inBox:hover .img:after {
          /*content: "";
          display: block;
          width: 100%;
          height: 5px;
          background-color: rgba(58,57,211,1.00);
          position: absolute;
          bottom:0;
          left:0;
          transition:1s all;*/ }
      .temp_modal03 .inBox:hover figcaption {
        opacity: 1;
        display: block;
        transition: 1.5s all; }

.modal-content.temp_modal01-content {
  border: none;
  padding: 0; }
  @media print, screen and (min-width: 767.9px) {
    .modal-content.temp_modal01-content {
      width: 800px;
      margin-left: -400px; } }
  @media print, screen and (min-width: 767.9px) {
    .modal-content.temp_modal01-content {
      display: flex; } }
  .modal-content.temp_modal01-content p.img {
    width: 100%; }
    @media print, screen and (min-width: 767.9px) {
      .modal-content.temp_modal01-content p.img {
        width: 50%; } }
    .modal-content.temp_modal01-content p.img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .modal-content.temp_modal01-content table,
  .modal-content.temp_modal01-content .txtBox {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 3vw 2vw 2vw 2vw; }
    @media print, screen and (min-width: 767.9px) {
      .modal-content.temp_modal01-content table,
      .modal-content.temp_modal01-content .txtBox {
        width: 50%; } }
    .modal-content.temp_modal01-content table p,
    .modal-content.temp_modal01-content .txtBox p {
      margin-top: 0.5em; }

.modal-close {
  width: 30px;
  height: 30px;
  color: #fff;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  font-size: 120%;
  position: absolute;
  top: -10px;
  border: 1px solid #fff;
  right: -10px; }
  @media print, screen and (min-width: 767.9px) {
    .modal-close {
      width: 50px;
      height: 50px;
      font-size: 150%; } }
  .modal-close:hover {
    opacity: 1; }