@charset "utf-8";

/* ======================================================
 * pensam.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  /* ----- font ----- */
  .hero-layout-v1,.magflap-heading-lv2,.feature-column-layout .detail_title > .title_num,.feature-column-layout .detail_title > .title_text,.feature-column-layout > .column_image > .image_caption,.feature-column-layout .detail_box_v1,.feature-image-set .image_num > li{
    font-family: "Noto Sans CJK JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
  }
 
  /* ----- opacity ----- */
  .pensam-gallery-layout a .gallery_thumb_title {
    opacity: 0;
  }
  .pensam-gallery-layout .gallery_thumb_item > a:not(.is-active):hover,
  .pensam-product-index-layout > a:hover .index_image img {
    opacity: .8;
  }
  .pensam-gallery-layout a.is-active .gallery_thumb_title {
    opacity: 1;
  }
  
  /* ----- transition ----- */
  .pensam-gallery-layout .block .gallery_thumb_title {
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  .pensam-gallery-layout a.is-active .gallery_thumb_title,
  .pensam-product-index-layout > a .index_image img {
    -webkit-transition: opacity .2s ease-out 0s;
    transition: opacity .2s ease-out 0s;
  }
  
  /* ----- hero-layout ----- */
  .hero-layout-v1{
    position: relative;
  }
  
  .hero-layout-v1 > .hero_text{
    position: absolute;
    bottom: 15%;
    left: 6.6%;
    z-index: 10;
    font-weight: 700;
  }
  .hero-layout-v1 > .hero_text > p:first-child{
    font-size: 2rem;
    line-height: 1.5;
  }
  .hero-layout-v1 > .hero_text > p:last-child{
    margin-top: 0.2em;
    font-size: 4rem;
    line-height: 1.2;
  }
  .hero-layout-v1 > .hero_visual{
    position: relative;
    z-index: 1;
  }
  /* ----- heading ----- */
  .magflap-heading-lv2{
    margin-top: 5em;
    text-align: center;
  }
  .magflap-heading-lv2 h2{
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .magflap-heading-lv2.verNew h2{
    position: relative;
    display: inline-block;
    padding-left: 94px;
  }
  .magflap-heading-lv2.verNew h2::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -36px;
    background: url("/sp/magflap/img/magflap_ic01.png") no-repeat 0 0;
    background-size: contain;
    width: 72px;
    height: 72px;
  }
  
  .magflap-tx-2col{
    margin-top: 3.1em;
  }
  .magflap-tx-2col .tx_title{
    position: relative;
    display: inline-block;
    padding-left: 100px;
  }
  .magflap-tx-2col .tx_title::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -23px;
    background: url("/sp/magflap/img/magflap_ic03.png") no-repeat 0 0;
    background-size: contain;
    width: 86px;
    height: 51px;
  }
  /* ----- lineup-column-layout ----- */
  .lineup-column-layout{
    margin-top: 3.1em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-jalign-items: center;
    align-items: center;
  }
  .lineup-column-layout > .column_item:first-child {
    width: 55.9%;
  }
  .lineup-column-layout > .column_item:nth-child(2) {
    width: 40.5%;
  }
  .lineup-column-layout > .column_item + .column_item{
    margin-left: 42px;
  }
  /* ----- youtube-layout ----- */
  .youtube-layout-v4{
    width: 100%;
    max-width: 100%;
    margin-top: 5em;
  }
  /* ----- feature-image-set ----- */
  .feature-image-set{
    margin-top: 1.8em;
  }
  .feature-image-set > .image_caption{
    text-align: center;
  }
  .feature-image-set > .image_caption > p{
    position: relative;
    display: inline-block;
    padding-left: 33px;
    font-size: 2.2rem;
  }
  .feature-image-set > .image_caption > p::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -12px;
    background: url("/sp/magflap/img/magflap_ic02.png") no-repeat 0 0;
    background-size: contain;
    width: 24px;
    height: 24px;
  }
  .feature-image-set > .image_inner{
    position: relative;
    width: 66.5%;
    margin: 0 auto;
  }
  .feature-image-set .image_num > li{
    position: absolute;
    display: inline-block;
    padding: 5px;
    width: 1.5em;
    height: 1.5em;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    background-color: #000;
    border-radius: 10px;
    color: #fff;
    text-align: center;
  }
  .feature-image-set .image_num > li:first-child{
    top: 46%;
    left: -1.8em;
  }
  .feature-image-set .image_num > li:nth-child(2){
    bottom: 12.5%;
    right: -1.8em;
  }
  .feature-image-set .image_num > li:nth-child(3){
    top: 0;
    right: -1.8em;
  }
  .feature-image-set .image_num > li:nth-child(4){
    top: 12.5%;
    right: -1.8em;
  }
  .feature-image-set .image_num > li:nth-child(5){
    bottom: 0;
    right: -1.8em;
  }
  /* ----- feature-column-layout ----- */
  .feature-column-layout{
    position: relative;
    margin-top: 2.5em;
    background-color: #f5f5f5;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .feature-image-set + .feature-column-layout{
    margin-top: 3.1em;
  }
  .feature-column-layout[data-feature="1"] {
    padding-top: 26px;
    background: none;
  }
  .feature-column-layout > [class*="column_"]{
    width: 50%;
  }
  .feature-column-layout > .column_detail{
    padding: 60px 96px 50px 60px;
  }
  .feature-column-layout[data-feature="1"] > .column_detail{
    padding-right: 76px;
    background-color: #f5f5f5;
  }
  .feature-column-layout[data-feature="3"] > .column_detail{
    padding-bottom: 0;
  }
  .feature-column-layout[data-feature="1"] > .column_image{
    margin-top: -25px;
  }
  .feature-column-layout .detail_title{
    display: flex;
  }
  .feature-column-layout .detail_title > .title_num{
    display: inline-block;
    padding: 5px;
    width: 1.5em;
    height: 1.5em;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    background-color: #000;
    border-radius: 10px;
    color: #fff;
    text-align: center;
  }
  .feature-column-layout .detail_title > .title_text{
    margin-left: 4.5%;
    width: 81.9%;
    font-size: 3.4rem;
    font-weight: 700;
  }
  .feature-column-layout .detail_text{
    margin-top: 0.6em;
    font-size: 2rem;
  }
  .feature-column-layout .detail_box_v1{
    position: relative;
    margin-top: 1.2em;
  }
  .feature-column-layout .detail_box_v1::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -15%;
    width: 38px;
    height: 53px;
    margin-top: -27px;
    border-style: solid;
    border-width: 27px 0 27px 38px;
    border-color: transparent transparent transparent #00764b;
  }
  .feature-column-layout[data-feature="3"] .detail_box_v1{
    margin-top: 2.3em;
  }
  .feature-column-layout[data-feature="3"] .detail_box_v1::after{
    top: 64%;
  }
  .feature-column-layout .detail_box_v1 >.box_lead{
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
  }
  .feature-column-layout .detail_box_v1 > .box_title{
    padding: 6px 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 15px;
  }
  .feature-column-layout .detail_box_v1 > .box_text{
    margin-top: 0.4em;
    font-size: 2rem;
  }
  .feature-column-layout .detail_box_v1 > .box_image{
    margin-top: 0.8em;
  }
  .feature-column-layout .detail_box_v1 > .box_media{
    margin-top: 0.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell{
    border: 2px solid #000;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell {
    width: calc((100% - 4px) / 2);
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell+ .media_cell{
    margin-left: 4px;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell > .cell_title{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #000;
  }
  .feature-column-layout > .column_image > .image_caption{
    padding: 20px;
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    background-color: #000;
  }
  .feature-column-layout > .column_image > .image_caption > .f-strong{
    font-size: 3.2rem;
  }
  .feature-column-layout .list-note > li + li{
    margin-top: 0.2em;
  }
  /* ----- use-column-layout ----- */
  .use-column-layout{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 2.5em;
    padding-right: 30px;
  }
  .use-column-layout > .column_image{
    width: calc((100% - 30px) / 2);
    margin-right: 30px;
    padding-left: 30px;
  }
  .use-column-layout > .column_detail{
    width: calc((100% - 30px) / 2);
  }
  .use-column-layout .list-order > li{
    padding-left: 22px;
    font-size: 2rem;
  }
  .use-column-layout .f-mark{
    color: #00a0e9;
    padding: 0 5px;
  }
  
  

  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .feature-column-layout > .column_detail {
    padding: 40px 76px 30px 40px;
  }
  .feature-column-layout[data-feature="1"] > .column_detail {
    padding-right: 56px;
  }
  .feature-column-layout[data-feature="1"] > .column_image {
    margin-top: -23px;
  }
  .feature-image-set .image_num > li,
  .feature-column-layout .detail_title > .title_num {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .feature-column-layout .detail_title > .title_text {
    font-size: 3.2rem;
  }
  .feature-column-layout .detail_box_v1::after {
    right: -13%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1120px) {
  .feature-column-layout > .column_detail {
    padding: 30px 66px 20px 30px;
  }
  .feature-column-layout[data-feature="1"] > .column_detail {
    padding-right: 46px;
  }
  .feature-column-layout[data-feature="1"] > .column_image {
    margin-top: -21px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .feature-column-layout .detail_box_v1::after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 19px 0 19px 32.9px;
    border-color: transparent transparent transparent #00764b;
  }
}
@media screen and (min-width: 768px) and (max-width: 890px) {
  .feature-image-set .image_num > li,
  .feature-column-layout .detail_title > .title_num {
    font-size: 3.2rem;
  }
  .feature-column-layout .detail_box_v1::after {
    right: -16%;
  }
}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  /* ----- font ----- */
  .hero-layout-v1,.magflap-heading-lv2,.feature-column-layout .detail_title > .title_num,.feature-column-layout .detail_title > .title_text,.feature-column-layout > .column_image > .image_caption,.feature-column-layout .detail_box_v1,.feature-image-set .image_num > li{
    font-family: "Noto Sans CJK JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
  }
 
  /* ----- transition ----- */
  .pensam-gallery-layout .gallery_thumb_item .gallery_thumb_image::before {
    -webkit-transition: background-color .2s ease-out 0s;
    transition: background-color .2s ease-out 0s;
  }
  .pensam-gallery-layout .gallery_thumb_item .gallery_thumb_image::after {
    -webkit-transition: border-color .2s ease-out 0s;
    transition: border-color .2s ease-out 0s;
  }
  
  /* ----- hero-layout ----- */
  .hero-layout-v1{
    margin-left: -15px;
    margin-right: -15px;
  }
  .hero-layout-v1 > .hero_text{
    margin-top: 1.5em;
    font-weight: 700;
    text-align: center;
  }
  .hero-layout-v1 > .hero_text > p:first-child{
    font-size: 1.5rem;
    line-height: 1;
  }
  .hero-layout-v1 > .hero_text > p:last-child{
    margin-top: 0.4em;
    font-size: 2.7rem;
    line-height: 1;
  }
  
  /* ----- heading ----- */
  .magflap-heading-lv2{
    margin-top: 3.5em;
    text-align: center;
  }
  .magflap-heading-lv2 h2{
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .magflap-heading-lv2.verNew{
    text-align: left;
  }
  .magflap-heading-lv2.verNew h2{
    position: relative;
    display: inline-block;
    
    padding-left: 52px;
  }
  .magflap-heading-lv2.verNew h2::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -22px;
    background: url("/sp/magflap/img/magflap_ic01.png") no-repeat 0 0;
    background-size: contain;
    width: 43px;
    height: 43px;
  }
  
  .magflap-tx-2col{
    margin-top: 1.8em;
  }
  .magflap-tx-2col .tx_title{
    position: relative;
    display: inline-block;
    padding-left: 52px;
  }
  .magflap-tx-2col .tx_title::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -15px;
    background: url("/sp/magflap/img/magflap_ic03.png") no-repeat 0 0;
    background-size: contain;
    width: 43px;
    height: 26px;
  }
  
  /* ----- lineup-column-layout ----- */
  .lineup-column-layout{
    margin-top: 1.4em;
    text-align: center;
  }
  .lineup-column-layout > .column_item + .column_item{
    margin-top: 1.4em;
  }
  .lineup-column-layout > .column_item:last-child{
    padding: 0 8%;
  }
  /* ----- youtube-layout ----- */
  .youtube-layout-v4{
    width: 100%;
    margin-top: 3.5em;
  }
  /* ----- feature-image-set ----- */
  .feature-image-set{
    margin-top: 1.2em;
  }
  .feature-image-set > .image_caption{
    text-align: center;
  }
  .feature-image-set > .image_caption > p{
    position: relative;
    display: inline-block;
    padding-left: 24px;
    font-size: 1.4rem;
  }
  .feature-image-set > .image_caption > p::before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -8px;
    background: url("/sp/magflap/img/magflap_ic02.png") no-repeat 0 0;
    background-size: contain;
    width: 16px;
    height: 16px;
  }
  .feature-image-set > .image_inner{
    position: relative;
    padding: 0 28px 0 24px;
  }
  .feature-image-set .image_num > li{
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 1.4rem;
    font-weight: 500;
    background-color: #000;
    border-radius: 5px;
    color: #fff;
    text-align: center;
  }
  .feature-image-set .image_num > li:first-child{
    top: 50%;
    left: 0;
    margin-top: -.5em;
  }
  .feature-image-set .image_num > li:nth-child(2){
    bottom: 12%;
    right: 5px;
  }
  .feature-image-set .image_num > li:nth-child(3){
    top: 0;
    right: 5px;
  }
  .feature-image-set .image_num > li:nth-child(4){
    top: 12%;
    right: 5px;
  }
  .feature-image-set .image_num > li:nth-child(5){
    bottom: 0;
    right: 5px;
  }
  /* ----- feature-column-layout ----- */
  .feature-column-layout{
    margin: 2.1em -15px 0;
    padding: 30px 15px;
    background-color: #f5f5f5;
  }
  .feature-column-layout .detail_title > .title_num{
    display: inline-block;
    width: calc(1.5em + 2px);
    height: calc(1.5em + 2px);
    font-size: 2rem;
    font-weight: 700;
    background-color: #000;
    border-radius: 10px;
    color: #fff;
    text-align: center;
  }
  .feature-column-layout .detail_title > .title_text{
    padding-left: 15px;
    font-size: 2.4rem;
    font-weight: 700;
  }
  .feature-column-layout .detail_text{
    margin-top: 1em;
    font-size: 1.4rem;
  }
  .feature-column-layout .detail_box_v1{
    position: relative;
    margin-top: 1.4em;
    padding-bottom: 20px;
  }
  .feature-column-layout .detail_box_v1::after{
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 27px;
    height: 19px;
    margin-left: -13.5px;
    border-style: solid;
    border-width: 19px 13.5px 0 13.5px;
    border-color: #00764b transparent transparent transparent;
  }
  .feature-column-layout .detail_box_v1 >.box_lead{
    margin-top: 0.5em;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
  }
  .feature-column-layout .detail_box_v1 > .box_title{
    padding: 8px 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 15px;
  }
  .feature-column-layout .detail_box_v1 > .box_text{
    margin-top: 0.6em;
    font-size: 1.4rem;
  }
  .feature-column-layout .detail_box_v1 > .box_image{
    margin-top: 0.9em;
    text-align: center;
  }
  .feature-column-layout .detail_box_v1 > .box_media{
    margin-top: 0.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell{
    border: 2px solid #000;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell:first-child{
    margin-right: 4px;
  }
  .feature-column-layout .detail_box_v1 > .box_media > .media_cell > .cell_title{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #000;
  }
  .feature-column-layout .column_image{
    margin-top: 1em;
    text-align: center;
  }
  .feature-column-layout[data-feature="2"] .column_image > figure > img,
  .feature-column-layout[data-feature="3"] .column_image > figure > img{
    width: 100%;
  }
  .feature-column-layout > .column_image > .image_caption{
    padding: 14px 10px 12px;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    background-color: #000;
  }
  .feature-column-layout > .column_image > .image_caption > .f-strong{
    font-size: 2.1rem;
  }
  .feature-column-layout .list-note{
    margin-top: 1.2em;
  }
  .feature-column-layout .list-note > li + li{
    margin-top: 0.2em;
  }
  /* ----- use-column-layout ----- */
  .use-column-layout{
    margin-top: 2.1em;
  }
  .use-column-layout > .column_detail{
    margin-top: 0.6em;
  }
  .use-column-layout > .column_image{
    padding: 0 12%;
  }
  .use-column-layout .list-order > li{
    padding-left: 20px;
  }
  .use-column-layout .f-mark{
    color: #00a0e9;
    padding: 0 5px;
  }
  /* ----- products-layout ----- */
  .products-layout .column-media.verW01 .column_image{
    padding: 0 14%;
  }
  .products-layout .column-media.verW02 .column_image{
    padding: 0 3%;
  }

  

  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}
/* ======================================================
 * SP Media Queries
====================================================== */
@media only screen and (min-width: 440px) and (max-width: 767px) {
  .feature-image-set > .image_inner {
    max-width: 400px;
    margin: 0 auto;
  }
}