@charset "UTF-8";
/* mediaquery
==========================================================*/
/* fontsize
==========================================================*/
/* icon
==========================================================*/
/*　dotted ------------------------------------------------

破線の間隔を調整
$color：色、$stripe:線幅、$spacing：破線の間隔, $height:高さ

==========================================================*/
/*　transition ------------------------------------------------

破線の間隔を調整
$speed：速度、$delay：開始時間

==========================================================*/
/* IEhack
==========================================================*/
@media print, screen and (min-width: 768px) {
  #product section .inner {
    width: auto;
    margin: 0 auto;
  }
  #product #mainArea #productList {
    width: 916px;
    margin: 85px auto 130px !important;
  }
  #product #mainArea #productList .wrap {
    margin-top: 110px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  #product #mainArea #productList .wrap::before, #product #mainArea #productList .wrap::after {
    position: absolute;
    content: "";
    z-index: 0;
  }
  #product #mainArea #productList .wrap .photo {
    width: 380px;
    height: 270px;
    position: relative;
    background: #fff;
    text-align: center;
    z-index: 10;
  }
  #product #mainArea #productList .wrap .photo img {
    position: relative;
    z-index: 10;
    width: 380px;
    height: 270px;
    object-fit: contain;
    background: #fff;
    z-index: 1;
  }
  #product #mainArea #productList .wrap .photo::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 3px;
    width: 100%;
    height: 100%;
    border: 1px solid #1f5a80;
    z-index: -1;
  }
  #product #mainArea #productList .wrap .text {
    width: 495px;
    box-sizing: border-box;
    padding: 30px 25px 55px;
    margin-top: 70px;
    background: #fff;
    position: relative;
    z-index: 10;
  }
  #product #mainArea #productList .wrap .text::before {
    content: "";
    background: url(../img/box_bg01.png) no-repeat center bottom;
    background-size: 100%;
    width: 495px;
    height: 15px;
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #product #mainArea #productList .wrap .text::after {
    content: "";
    background: url(../img/box_bg02.png) no-repeat center top;
    background-size: 100%;
    width: 495px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #product #mainArea #productList .wrap .text h2 {
    font-size: 3.5rem;
    color: #6B6B6B;
    padding-left: 55px;
    margin-bottom: 15px;
    position: relative;
    text-align: left;
    line-height: 1;
  }
  #product #mainArea #productList .wrap .text h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 50px;
    height: 50px;
  }
  #product #mainArea #productList .wrap .text .example {
    margin-top: 15px;
  }
  #product #mainArea #productList .wrap .text .example dd ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
  }
  #product #mainArea #productList .wrap .text .example dd ul li {
    margin: 12px 10px 0;
  }
  #product #mainArea #productList .wrap .text .btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  #product #mainArea #productList .wrap .text .btn a {
    position: relative;
    display: inline-block;
    padding: 3px 30px 3px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    background: linear-gradient(to bottom, #ffffff 70%, #dddddd);
    color: #1f5a80;
  }
  #product #mainArea #productList .wrap .text .btn a::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid  #800018;
    vertical-align: middle;
  }
  #product #mainArea #productList .wrap .text .btn a:hover {
    background: #ddd;
  }
  #product #mainArea #productList .wrap:nth-child(even) {
    flex-direction: row-reverse;
  }
  #product #mainArea #productList .wrap#product01 .text h2:before {
    background: url(../../common/img/num01.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product02 .text h2:before {
    background: url(../../common/img/num02.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product03 .text h2:before {
    background: url(../../common/img/num03.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product04 .text h2:before {
    background: url(../../common/img/num04.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product05 .text h2:before {
    background: url(../../common/img/num05.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product04 .photo img {
    object-fit: cover;
  }
  #product #mainArea #productList .wrap#product01::before {
    background: url(../img/index_bg01.png) no-repeat center center;
    background-size: cover;
    width: 125px;
    height: 110px;
    top: -160px;
    left: -190px;
  }
  #product #mainArea #productList .wrap#product01::after {
    background: url(../img/index_bg02.png) no-repeat center center;
    background-size: cover;
    width: 270px;
    height: 205px;
    top: -50px;
    right: -190px;
  }
  #product #mainArea #productList .wrap#product02::before {
    background: url(../img/index_bg03.png) no-repeat center center;
    background-size: cover;
    width: 400px;
    height: 350px;
    top: -160px;
    left: 160px;
  }
  #product #mainArea #productList .wrap#product02::after {
    background: url(../img/index_bg04.png) no-repeat center center;
    background-size: cover;
    width: 280px;
    height: 240px;
    top: 240px;
    right: -60px;
  }
  #product #mainArea #productList .wrap#product03::before {
    background: url(../img/index_bg05.png) no-repeat center center;
    background-size: cover;
    width: 405px;
    height: 300px;
    top: -110px;
    left: -160px;
  }
  #product #mainArea #productList .wrap#product03::after {
    background: url(../img/index_bg06.png) no-repeat center center;
    background-size: cover;
    width: 380px;
    height: 315px;
    top: 325px;
    left: 145px;
  }
  #product #mainArea #productList .wrap#product04::before {
    background: url(../img/index_bg07.png) no-repeat center center;
    background-size: cover;
    width: 540px;
    height: 460px;
    top: 225px;
    right: -200px;
  }
  #product #mainArea #productList .wrap#product05::after {
    background: url(../img/index_bg08.png) no-repeat center center;
    background-size: cover;
    width: 285px;
    height: 239px;
    top: 200px;
    left: -220px;
  }
}
@media screen and (max-width: 767px) {
  #product section .inner {
    width: auto;
    margin: 0 auto;
  }
  #product #mainArea .copy_txt {
    font-size: 2rem;
  }
  #product #mainArea #productList {
    overflow: hidden;
  }
  #product #mainArea #productList .wrap {
    margin-top: 20%;
    padding: 0%;
    box-sizing: border-box;
    position: relative;
    				/*
    				&#product01::before{
    					background: url(../img/index_bg01.png) no-repeat center center;
    					background-size: cover;
    					width: 125px;
    					height: 110px;
    					top: -160px;
    					left: -190px;
    				}
    				&#product01::after{
    					background: url(../img/index_bg02.png) no-repeat center center;
    					background-size: cover;
    					width: 270px;
    					height: 205px;
    					top: -50px;
    					right: -190px;
    				}
    				&#product02::before{
    					background: url(../img/index_bg03.png) no-repeat center center;
    					background-size: cover;
    					width: 400px;
    					height: 350px;
    					top: -160px;
        				left: 160px;
    				}
    				&#product02::after{
    					background: url(../img/index_bg04.png) no-repeat center center;
    					background-size: cover;
    					width: 280px;
    					height: 240px;
    					top: 240px;
    					right: -60px;
    				}
    				&#product03::before{
    					background: url(../img/index_bg05.png) no-repeat center center;
    					background-size: cover;
    					width: 405px;
    					height: 300px;
    					top: -110px;
    					left: -160px;
    				}
    				&#product03::after{
    					background: url(../img/index_bg06.png) no-repeat center center;
    					background-size: cover;
    					width: 380px;
    					height: 315px;
    					top: 325px;
    					left: 145px;
    				}
    				&#product04::before{
    					background: url(../img/index_bg07.png) no-repeat center center;
    					background-size: cover;
    					width: 540px;
    					height: 460px;
    					top: 225px;
    					right: -200px;
    				}
    				&#product05::after{
    					background: url(../img/index_bg08.png) no-repeat center center;
    					background-size: cover;
    					width: 285px;
    					height: 239px;
    					top: 200px;
    					left: -220px;
    				}*/
  }
  #product #mainArea #productList .wrap::before, #product #mainArea #productList .wrap::after {
    position: absolute;
    content: "";
    z-index: 0;
  }
  #product #mainArea #productList .wrap::before {
    background: url(../img/index_bg01.png) no-repeat center center;
    background-size: cover;
    width: 30%;
    height: 15%;
    top: -4%;
    left: 0%;
  }
  #product #mainArea #productList .wrap::after {
    background: url(../img/index_bg02.png) no-repeat center center;
    background-size: cover;
    width: 50%;
    height: 30%;
    top: 20%;
    right: -4%;
  }
  #product #mainArea #productList .wrap .photo {
    width: 80%;
    margin: 0 auto;
    position: relative;
    background: #fff;
    text-align: center;
    z-index: 10;
  }
  #product #mainArea #productList .wrap .photo img {
    position: relative;
    z-index: 10;
    height: 50vw;
    object-fit: contain;
    background: #fff;
    z-index: 1;
  }
  #product #mainArea #productList .wrap .photo::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 3px;
    width: 100%;
    height: 100%;
    border: 1px solid #1f5a80;
    z-index: -1;
  }
  #product #mainArea #productList .wrap .text {
    box-sizing: border-box;
    padding: 30px 2% 8%;
    margin-top: 6%;
    background: #fff;
    position: relative;
    z-index: 10;
  }
  #product #mainArea #productList .wrap .text::before {
    content: "";
    background: url(../img/box_bg01.png) no-repeat center bottom;
    background-size: 100%;
    width: 100%;
    height: 15px;
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #product #mainArea #productList .wrap .text::after {
    content: "";
    background: url(../img/box_bg02.png) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
  }
  #product #mainArea #productList .wrap .text h2 {
    font-size: 2.8rem;
    color: #6B6B6B;
    padding-left: 51px;
    margin-bottom: 15px;
    position: relative;
    text-align: left;
    line-height: 1;
  }
  #product #mainArea #productList .wrap .text h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 45px;
    height: 45px;
  }
  #product #mainArea #productList .wrap .text p span {
    display: block;
  }
  #product #mainArea #productList .wrap .text .example {
    margin-top: 15px;
  }
  #product #mainArea #productList .wrap .text .example dd ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
  }
  #product #mainArea #productList .wrap .text .example dd ul li {
    margin: 12px 10px 0;
    width: 20%;
  }
  #product #mainArea #productList .wrap .text .btn {
    width: 60%;
    margin: 8% auto 0;
  }
  #product #mainArea #productList .wrap .text .btn a {
    display: block;
    text-align: center;
    padding: 13px 10px 13px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1;
    font-size: 1.3rem;
    background: linear-gradient(to bottom, #ffffff 70%, #dddddd);
  }
  #product #mainArea #productList .wrap .text .btn a::after {
    content: "▶";
    color: #800018;
    padding-left: 5px;
  }
  #product #mainArea #productList .wrap .text .btn a:hover {
    background: #ddd;
  }
  #product #mainArea #productList .wrap:nth-child(even) {
    flex-direction: row-reverse;
  }
  #product #mainArea #productList .wrap#product01 {
    margin-top: 5%;
  }
  #product #mainArea #productList .wrap#product01 .text h2:before {
    background: url(../../common/img/num01.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product02 .text h2:before {
    background: url(../../common/img/num02.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product03 .text h2:before {
    background: url(../../common/img/num03.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product04 .text h2:before {
    background: url(../../common/img/num04.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product05 .text h2:before {
    background: url(../../common/img/num05.svg) no-repeat center center;
    background-size: 100%;
  }
  #product #mainArea #productList .wrap#product04 .photo img {
    object-fit: cover;
  }
}