@charset "UTF-8";
/*
.overflow{
                            
    position: relative;

    &:after{
        content: "";
        display: block;
        width: (40/640)*100vw;
        height: 100%;
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;

        @include gra($monocolor,1); // color,rotate:0 or 1
        transform: scaleX(-1);
        opacity: 0.2;
    }
    .figure{

        display: flex;
        width: 100%;
        box-sizing: border-box;
        overflow: auto;

        img{
            width: (960/640)*100vw;
        }
        &:after{
            content: "■■";
            display: block;
            opacity: 0;
        }
    }
}
*/
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,700&subset=japanese);
@font-face {
  font-family: 'tegaki';
  src: url("../webfont/apjapanesefont.eot");
  src: url("../webfont/apjapanesefont.eot?#iefix") format("embedded-opentype"), url("../webfont/apjapanesefont.woff") format("woff"), url("../webfont/apjapanesefont.ttf") format("truetype");
  font-display: swap;
}

/* =================================================
   unique layout
================================================= */
/* -------------------------------------
   article
------------------------------------- */
#article {
  /* -------------------------------------
       section_1
    ------------------------------------- */
}

#article .section {
  /* -------------------------------------
           section_1
        */
  /* -------------------------------------
           section_2
        */
}

#article .section.section_1 .inner {
  /* -------------------------------------
                   content
                ------------------------------------- */
}

#article .section.section_1 .inner .content {
  /* -------------------------------------
                       content_1
                    */
  /* -------------------------------------
                       content_2
                    */
  /* -------------------------------------
                       content_3
                    */
  /* -------------------------------------
                       content_4
                    */
}

#article .section.section_1 .inner .content:last-of-type {
  padding: 0;
}

#article .section.section_1 .inner .content.underline {
  border-bottom: 1px solid #cccccc;
}

#article .section.section_1 .inner .content.content_1 {
  padding: 1.0rem 0 0;
}

#article .section.section_1 .inner .content.content_1 .h3.h3_1 {
  padding: 0 0 1.0rem;
}

#article .section.section_1 .inner .content.content_1 .h3.h3_1 span {
  display: block;
}

#article .section.section_1 .inner .content.content_1 .h3.h3_1 span.txt {
  font-size: 1.6rem;
  line-height: 1.5;
}

#article .section.section_1 .inner .content.content_1 .h3.h3_1 span.txt strong {
  color: #EF4220;
  font-size: 1.8rem;
}

#article .section.section_1 .inner .content.content_3 {
  padding: 2.0rem 0 0;
}

#article .section.section_1 .inner .content.content_3 .h3.h3_1 {
  padding: 0;
}

#article .section.section_1 .inner .content.content_3 .h3.h3_1 span {
  display: block;
}

#article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt {
  font-size: 1.4rem;
  line-height: 1.5;
}

#article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt_2 {
  font-size: 1.6rem;
  line-height: 1.5;
}

#article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt_2 strong {
  color: #EF4220;
  font-size: 1.8rem;
}

#article .section.section_1 .inner .content.content_4 .h4 {
  letter-spacing: 0.175em;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 {
  display: block;
  margin: 0 0 1.0em 0;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 span {
  display: block;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt {
  display: flex;
  flex-direction: column;
  letter-spacing: -0.05em;
  color: white;
  font-size: 1.0rem;
  line-height: 1;
  text-align: center;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0.15em 0 0 0;
  margin: 0;
  background: #EF4220;
  border-radius: 100%;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  top: -2.0rem;
  left: -2.0rem;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt:after {
  content: "";
  display: block;
  width: 0;
  border: 5px solid transparent;
  border-bottom: 8px solid transparent;
  border-top: 8px solid #EF4220;
  box-sizing: border-box;
  position: absolute;
  z-index: -1;
  bottom: -6px;
  right: -3px;
  transform: rotate(-45deg);
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt strong {
  line-height: 1;
  font-size: 3.0rem;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt_2 {
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 0 0 0 2.0rem;
  margin: 0.5em 0 1.0em;
}

#article .section.section_1 .inner .content.content_4 .h4.h4_1.underline {
  border-bottom: 1px solid #cccccc;
}

#article .section.section_1 .inner .content.content_4 .item {
  border: 4px solid #cccccc;
  padding: 1rem 2rem 2rem;
  box-sizing: border-box;
  position: relative;
}

@media screen and (min-width: 768px) {
  /* =================================================
   unique layout
================================================= */
  /* -------------------------------------
   article
------------------------------------- */
  #article {
    /* -------------------------------------
       section_1
    ------------------------------------- */
  }
  #article .section {
    /* -------------------------------------
           section_2
        */
  }
  #article .section.section_1 .inner {
    width: 100%;
    /* -------------------------------------
                   content
                ------------------------------------- */
    /* -------------------------------------
                   link
                ------------------------------------- */
  }
  #article .section.section_1 .inner .content {
    width: 960px;
    margin: 0 auto;
    /* -------------------------------------
                       content_1
                    */
    /* -------------------------------------
                       content_2
                    */
    /* -------------------------------------
                       content_3
                    */
    /* -------------------------------------
                       content_4
                    */
  }
  #article .section.section_1 .inner .content.content_1 {
    padding: 0;
  }
  #article .section.section_1 .inner .content.content_1 .h3.h3_1 {
    padding: 0;
  }
  #article .section.section_1 .inner .content.content_1 .h3.h3_1 span.txt {
    font-size: 4.0rem;
    line-height: 1.5;
  }
  #article .section.section_1 .inner .content.content_1 .h3.h3_1 span.txt strong {
    font-size: 4.6rem;
  }
  #article .section.section_1 .inner .content.content_2 {
    width: 780px;
    padding: 40px 0;
    /* -------------------------------------
                           lyout
                        */
  }
  #article .section.section_1 .inner .content.content_2 .h4.h4_1 {
    margin: 0 0 20px 0;
  }
  #article .section.section_1 .inner .content.content_2 .h4.h4_1 span.num {
    font-size: 4.0rem;
  }
  #article .section.section_1 .inner .content.content_2 .h4.h4_1 span.txt {
    font-size: 2.4rem;
  }
  #article .section.section_1 .inner .content.content_2 .item {
    padding: 30px 0;
    margin: 0;
  }
  #article .section.section_1 .inner .content.content_2 .item {
    overflow: hidden;
    position: relative;
  }
  #article .section.section_1 .inner .content.content_2 .item .float_l {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  #article .section.section_1 .inner .content.content_2 .item .float_l:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+30,1+30,0+100 */
    background: -moz-linear-gradient(-45deg, white 0%, white 30%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, white 0%, white 30%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, white 0%, white 30%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #article .section.section_1 .inner .content.content_2 .item .float_r {
    width: 480px;
  }
  #article .section.section_1 .inner .content.content_2 .item.reverse .float_l:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+70,1+70 */
    background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
  }
  #article .section.section_1 .inner .content.content_2 .item.reverse .float_r {
    margin: 0 0 0 300px;
  }
  #article .section.section_1 .inner .content.content_3 {
    padding: 40px 0 20px;
  }
  #article .section.section_1 .inner .content.content_3 .h3.h3_1 {
    padding: 0;
  }
  #article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt {
    font-size: 2.4rem;
    line-height: 1.75;
  }
  #article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt_2 {
    font-size: 4.0rem;
    line-height: 1.75;
  }
  #article .section.section_1 .inner .content.content_3 .h3.h3_1 span.txt_2 strong {
    font-size: 4.2rem;
  }
  #article .section.section_1 .inner .content.content_4 {
    width: 780px;
  }
  #article .section.section_1 .inner .content.content_4 .h4 {
    letter-spacing: 0.175em;
  }
  #article .section.section_1 .inner .content.content_4 .h4.h4_1 {
    margin: 0 0 20px 0;
  }
  #article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt {
    letter-spacing: -0.05em;
    font-size: 1.8rem;
    width: 70px;
    height: 70px;
    padding: 0.3em 0 0 0;
    top: -35px;
    left: -35px;
  }
  #article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt:after {
    border: 8px solid transparent;
    border-bottom: 16px solid transparent;
    border-top: 16px solid #EF4220;
    bottom: -16px;
    right: -8px;
  }
  #article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt strong {
    font-size: 4.4rem;
  }
  #article .section.section_1 .inner .content.content_4 .h4.h4_1 span.txt_2 {
    font-size: 2.4rem;
    line-height: 1.5;
    padding: 0;
    margin: 0 0 20px;
  }
  #article .section.section_1 .inner .content.content_4 .item {
    padding: 50px 90px 60px;
  }
  #article .section.section_1 .inner .link {
    width: 920px;
    margin: 0 auto;
  }
}