/* =========================================================================================
  ABOUT IBISPAINT STYLE
  LATEST UPDATE : 2024/09/18
  AUTHER : SHIMIZU HIYORI
========================================================================================= */
/*
[INDEX]
* CLEARING OLD STYLE
* COMMON
* Guidebook01
* Guidebook02
* Guidebook03
* Guidebook04
* Guidebook05
* DOWNLOAD
*/

/********************************
CLEARING OLD STYLE
********************************/
.about_contents,
.guidebook-contents {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, sans-serif;
}

/* フォント設定 */
.guidebook-contents .guidebook-index,
.guidebook-contents .g04_contents,
.guidebook-contents .g05_contents,
.guidebook-contents .g06_contents {
    font-family: Noto Sans CJK JP, 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, sans-serif;
}

ul {
    list-style: none;
}

div.about_contents h1,
div.guidebook-contents h1,
.guidebook-sample-pages-inner dt {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.3;
    width: 94%;
    padding: 0 0 0 0;
    margin: 0 auto 0 auto;
    background-image: none;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
}

div.about_contents h1,
div.guidebook-contents h1 {
    margin-top: calc(48px - (((24px * 1.3) - 24px) / 2));
    margin-bottom: calc(40px - (((24px * 1.3) - 24px) / 2));
}

.about_contents h2,
.guidebook-contents h2 {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: none;
}
/********************************
/CLEARING OLD STYLE
********************************/

/********************************
COMMON
  LATEST UPDATE : 2024/09/18
  AUTHER : SHIMIZU HIYORI
********************************/
.go-product,
.about-feature > p,
.feature-block h2,
.feature-block-explain,
.about-function h1,
.about-function > p,
.about-download h1,
.about-download > p,
.guidebook-download h1,
.guidebook-download > p,
/*.about-premium > div,*/
.about-premium > p {
    width: 94%;
}

.tabs { 
    display: flex;  
    flex-wrap: wrap;    
}   

.tab_content {  
    flex: 100%; 
    display: none;  
    overflow: hidden;
}

    #tab01:checked ~ #tab01_content,    
    #tab02:checked ~ #tab02_content,    
    #tab03:checked ~ #tab03_content,    
    #tab04:checked ~ #tab04_content,    
    #tab05:checked ~ #tab05_content,
    #tab06:checked ~ #tab06_content {
    display: block; 
}   

.tab_content {  
    position: relative; 
    animation: fadeIn 0.3s cubic-bezier(0.33, 1, 0.68, 1) forwards; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 表紙スライダ */
.guidebook_title {
    margin-bottom: 45px;
}

.guidebook-top {
    width: 100%;
    font-size: 12px;
    line-height: 17px;
    margin: 10px auto;
}

.guidebook-top .splide1 {
    width: 300px;
    float: left;
    position: relative;
}

.guidebook-top .splide1 .splide__track {
    height: 100%;
}

.guidebook-top .splide1 .splide__slide {
    margin-bottom: 35px;
    text-align: center;
}

.guidebook-top .splide1 .splide__slide .slide-content {
    transition: .7s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.guidebook-top .splide1 .splide__slide.is-active .slide-content {
    opacity: 1; 
    z-index: 1; 
}


.guidebook-top .splide1 .splide__slide.is-active .slide-content.tab_label {
    background-color: #000000;
}

.guidebook-top .splide1 .splide__slide img {
    height: auto;
    width: 230px;
    border-radius: 4px;
    display: block;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
}

.guidebook-top .splide1 .splide__pagination__page {
    border: none;
    background-color: #C3CBD1;
}

.guidebook-top .splide1 .splide__pagination__page.is-active {
    scale: (1.1);
    background-color: #2EABFF;
}

.guidebook-top .splide1 .splide__arrow {
    background-color: #c4ddec ;
}

.guidebook-top .splide1 .splide__arrow svg {
    fill: #fff;
}

/* ガイドブック詳細 */
.guidebook-detail {
    float: right;
    width: 300px;
    color: #606060;
}

.detail_content  h2 {
    font-size: 16px;
    font-weight: bold;
    height: 0;
    letter-spacing: .1rem;
    line-height: 1.5;
}

.detail_content > p {
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0;
}

.detail_content dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.detail_content dt {
    width: 16%;
    padding-top: 5px;
}

.detail_content dd {
    width: 70%;
    padding-top: 5px;
}

/* 購入ボタン */
.detail-btn {
    padding-top: 20px;
}

.detail-btn a {
    display: inline-block;
    padding: 15px 50px;
    border: 2px solid #2EABFF;
    background-color: #2EABFF;
    border-radius: 50px;
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.detail-btn a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
  }

.detail-btn a:hover::before {
    animation: shine 0.9s;
    }

    @keyframes shine {
    100% {
        left: 125%;
    }
}

.detail-btn a p {
    display: block;
    width: 150px;
    text-align: center;
}

/* 目次 */
input[name="tab_switch"],
input[name="tab_switch_copy"] {  
    display: none;  
}   

.guidebook-index,
.guidebook-index-copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 540px;
    margin: 0 auto;
    padding: 30px 0;
}

.guidebook-index .tab_label,
.guidebook-index-copy .tab_label {
    width: 250px;
    display: block;
    padding: 6px 15px;
    margin: 5px 10px;
    background-color: #DDE3E8;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;

}

.guidebook-index label p,
.guidebook-index-copy label p {
    font-weight: bold;
    width: 200px;
    margin-left: 13px;
}

.guidebook-index .tab_label:hover,
.guidebook-index-copy .tab_label:hover {
    background-color: #eef1f4;
}

.guidebook-index-copy {
    border-bottom: 1px solid #D9E0E6;
}

.tab_label {
    position: relative;
}

input[type="radio"]:checked + .tab_label {
    background-color: #2EABFF;
    color: #fff;
    border-color: #2EABFF;
}

input[type="radio"]:checked + .tab_label::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    margin: auto;
    animation: moveArrow 0.7s ease-in-out infinite alternate;
}

@keyframes moveArrow {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(0) translateX(3px);
    }
}

/* ダウンロード */
.guidebook-download {
    padding-top: 100px;
    width: 540px;
    margin: 0 auto;
 }

 .download_top {
    margin-bottom: 50px;
 }

 .download_top > img {
    float: left;
 }

 .download_top div {
    float: right;
    width: 370px;
    text-align: center;
 }

 .download_top div img {
    margin-top: 60px;
    
 }

 .download_catch {
    font-size: 20px;
    margin: 40px 0 30px 0;
    font-weight: bold;
 }

 .download_text {
    text-align: left;
 }

 .download-btn-block {
    margin: 0 auto 10px;
 }

 .download-btn-block:last-child {
    margin: 0 auto 0;
 }

 .download-btn-block dt {
    font-weight: bold;
    margin-bottom: 5px;
 }
 
 .download-btn-block dd {
    margin-bottom: 10px;
 }

.download-btn-left,
.download-btn-right {
    width: 260px;
    height: 61px;
    display: table;
    background-position: 19px center;
    background-repeat: no-repeat;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}

.download-btn-left:hover,
.download-btn-right:hover {
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}

.download-btn-left {
    float: left;
}

.download-btn-right {
    margin-left: 20px;
    float: right;
}

.download-btn-left a,
.download-btn-right a {
    vertical-align: middle;
    width: inherit;
    height: auto;
    padding: 0 12px 0 61px;
    display: table-cell;
}

.download-btn-left a:hover,
.download-btn-right a:hover {
    text-decoration: none;
}

.download-btn-left a p,
.download-btn-right a p {
    color: #FFFFFF;
    width: 100%;
    height: auto;
    display: table;
}

.download-btn-left a p:first-child,
.download-btn-right a p:first-child {
    font-size: 21px;
    line-height: 1.5rem;
}

.download-btn-left a p:last-child,
.download-btn-right a p:last-child {
    font-size: 14px;
    line-height: 1rem;
}

.download-btn-left a p .store-download-p,
.download-btn-right a p .store-download-p {
    font-size: 10px;
}

.download-btn-left a .download-btn-p span,
.download-btn-right a .download-btn-p span {
    vertical-align: middle;
    font-weight: bold;
    font-size: 12px;
}

.download-btn-left a .download-btn-p .download-btn-price,
.download-btn-right a .download-btn-p .download-btn-price {
    font-size: 12px;
    font-weight: normal;
}

.store-download {
    margin-top: -15px;
}

.btn-windows {
    background-image: url("../img/about/btn_icon_windows.png");
    background-color: #000000;
}

.btn-apple {
    background-image: url(../img/about/btn_icon_ios.png);
    background-color: #000000;
}

.btn-google {
    background-image: url("../img/product/google_btn_L_icon.png");
    background-color: #40DC84;
}

.btn-google a p{
    color: #073042;
}

.btn-smartpass {
    background-image: url(../img/about/btn_icon_android.png);
    background-color: #EA5406;
}

.btn-apppass {
    background-image: url(../img/about/btn_icon_android.png);
    background-color: #B7BBBE;
}

.btn-huawei {
    background-image: url(../img/about/btn_icon_huawei.png);
    background-color: #C8102E;
    background-position: 17px center;
}

.about-bottom-download {
    padding: 48px 0 0;
}

/********************************
/COMMON
********************************/

/********************************
Guidebook01
********************************/
/* MAIN */
.about-main-image img,
.about-feature img,
.go-product a,
.function-block img,
.about-compatible,
.download-btn-left,
.download-btn-right,
.guidebook-sample-pages-inner,
.guidebook-main-image img,
.guidebook-illustrator-inner,
.guidebook-buy-inner,
.guidebook-buy-inner dl dd:nth-child(3) ul li a,
.guidebook-sample-pages-inner dd span figure:after,
.part01,
.part02,
.part03,
.part04,
.part05,
.part06 {
    -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
            -ms-border-radius: 6px;
             -o-border-radius: 6px;
                    border-radius: 6px;
}

/* FEATURE */
.about-feature {
    border-bottom: 1px solid #D9E0E6;
    margin-bottom: 48px;
}

.about-feature a {
    text-decoration: underline;
}

.about-feature a:hover {
    text-decoration: underline;
}

.about-feature > p,
.about-function > p,
.about-download > p,
.guidebook-download > p,
.about-premium > p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(48px - (((16px * 1.6) - 16px) / 2));
}

.guidebook-about > p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(20px - (((16px * 1.6) - 16px) / 2));
}

.guidebook-about > p:nth-child(3) {
    margin-bottom: calc(32px - (((24px * 1.3) - 24px) / 2));
}

.feature-block h2 {
    text-align: center;
    font-size: 21px;
    line-height: 1.3;
    height: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(24px - (((21px * 1.3) - 21px) / 2));
}

.feature-block-img {
    width: 100%;
    margin-bottom: 24px;
}

.feature-block-explain {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(48px - (((14px * 1.6) - 14px) / 2));
}

#feature-Notes {
    color: #999999;
    font-size: 12px;
    margin-top: calc(32px - (((12px * 1.35) - 12px) / 2));
    display: inline-block;
}

/* FUNCTION */
section.about-function {
    border-bottom: 1px solid #D9E0E6;
}

.function-block {
    margin-bottom: 120px;
}

.function-block,
.function-block > .function-block-titleBox {
    width: 100%;
}

.function-block > .function-block-titleBox {
    display: flex;
    flex-wrap: nowrap;
}

.function-block > .function-block-titleBox > h2 {
    width: 600px;
    height: auto;
    font-size: 35px;
    font-weight: bold;
}

.function-block > .function-block-titleBox > img {
    padding: 8px 10px 10px 7px;
}

.function-block > .function-block-img {
    width: 100%;
    margin-bottom: 16px;
}

.function-block > .function-block-explain {
    width: 95%;
    height: auto;
    font-size: 16px;
    line-height: 1.2;
    margin: auto;
    margin-top: 5px;
}

/* COMPATIBLE */
.about-compatible {
    padding: 48px;
    background-color: #F1F3F5;
    margin-bottom: 25px;
}

.about-compatible h2 {
    text-align: center;
    width: 100%;
    margin-bottom: calc(12px - (((18px * 1.3) - 18px) / 2));
}

.about-compatible table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #D9E0E6;
}

.about-compatible th,
.about-compatible td {
    vertical-align: middle;
    padding: 32px;
    border-bottom: 1px solid #D9E0E6;
}

.about-compatible th {
    width: 25%;
}

.about-compatible td {
    width: 75%;
}

/* PREMIUM */
.about-premium {
    border-bottom: 1px solid #D9E0E6;
}

.about-premium > div {
    margin: 0 auto;
    margin-bottom: calc(48px - (((16px * 1.6) - 16px) / 2));
}

.register-premium {
    width: 94%;
    height: auto;
    margin: 0 auto;
}
.register-premium > p,
.register-premium > div {
    width: 50%;
}

.register-premium > p {
    float: left;
}

.register-premium > div {
    float: right;
    display: table;
}

.register-premium > div > div {
    vertical-align: middle;
    width: 100%;
    height: 296px;
    display: table-cell;
}

.register-premium > div h2,
.register-premium > div p {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.register-premium > div h2 {
    color: #ff9435;
    font-size: 1.4em;
    margin-bottom: 0.6em;
}

.register-premium > div a {
    text-decoration: underline;
}

.register-premium img {
    width: 100%;
    height: auto;
}

.premium-features {
    padding: 48px;
    background-color: #fae9cf;
    border-radius: 6px;
}

.premium-features p:first-child {
    text-align: center;
    font-size: 1.8em;
    line-height: 1.2em;
    height: auto;
    margin-bottom: 24px;
}

.premium-features li {
    font-size: 1.2em;
    line-height: 1.5em;
    margin-left: 1.2em;
    margin-bottom: 1em;
    list-style-type: square;
}

.premium-features li a {
    color: #ffffff;
    font-size: 12px;
    line-height: 17px;
    text-decoration: none;
    width: auto;
    height: 17px;
    padding: 0 8px;
    margin-left: 0.8em;
    background-color: #ff9435;
    border-radius: 3px;
    display: inline-block;
}

.premium-features li a:dir(rtl) {
    margin-left: 0;
    margin-right: 0.8em;
}

.premium-features p:last-child {
    color: #666666;
    text-align: right;
}

/* DOWNLOAD BUTTON */
.go-product {
    text-align: center;
    padding-top: 16px;
    margin: 0 auto;
}

.go-product a {
    text-decoration: none;
    width: 100%;
    height: 72px;
    display: inline-block;
    background-color: #FAA003;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}

.go-product a:hover {
    background-color: #FFB535;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}

.go-product a span {
    color: #ffffff;
    font-size: 28px;
    display: flex;
    width: 100%;
    height: inherit;
    align-items: center;
    justify-content: center;
}


div#bottom-dl-btn p:first-child {
    font-size: 16px;
    line-height: 1.6;
}

/* PrimeList Check BUTTON */
@keyframes shiny {
    0%{
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }
    50% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }
    75% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }
    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

div.go-grade-comparison {
    width: fit-content;
    height: auto;
    margin: 40px auto 60px;
    text-align: center;
    line-height: 1.5;
    background-color: transparent;
    transition-duration: 1s;  /* hover → 通常 */
}

.go-grade-comparison a {
    display: table;
    position: relative;
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #ecc70e;
    border: solid 2px #ecc70e;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}

.go-grade-comparison a::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -60px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.go-grade-comparison_btn-txt{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-width: 300px;
    padding: 0px 2em;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    transition-duration: 0.6s;  /* hover → 通常 */
}

.go-grade-comparison a span {
    display: inline-block;
    text-align: center;
}

.go-grade-comparison_btn-txt > .dli-chevron-right {
    display: inline-block;
    vertical-align: middle;
    width: 0.6em;
    height: 0.6em;
    margin: 20px 10px;
    border: 3px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    line-height: 1;
    transform: translateX(-25%) rotate(45deg);
  }

/* ホバー時 */
.go-grade-comparison a:hover {
    box-shadow: none;
    background-color: #FFF;
    overflow: hidden;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
      -ms-transition: 0.6s;
          transition: 0.6s;
}
.go-grade-comparison a:hover .go-grade-comparison_btn-txt{
    color: #ecc70e;
}

/* GUIDEBOOK */
.guidebook-about {
    margin-bottom: calc(32px - (((24px * 1.3) - 24px) / 2));
}

.guidebook-about dl dt,
.guidebook-about ul li {
    font-size: 16px;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
}

.guidebook-about ul li {
    margin-left: 28px;
    margin-bottom: 0.3em;
    list-style-type: disc;
}

.guidebook-about dl dt {
    font-weight: bold;
}

.guidebook-sample-pages-inner {
    padding: 20px;
    background-color: #FFF9DB;
}

.guidebook-sample-pages-inner h2 {
    text-align: center;
    padding: 0;
    margin: 0;
}

.guidebook-sample-pages-inner dt {
    margin-bottom: calc(20px - (((24px * 1.3) - 20px) / 2));
}

.guidebook-sample-pages-inner dd {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.guidebook-sample-pages-inner dd:last-child {
    margin-bottom: 0;
}

.guidebook-sample-pages-inner dd > div {
    flex-direction: row;
}

.guidebook-sample-pages-inner dd span {
    display: inline-block;
}

.guidebook-sample-pages-inner dd span figure {
    width: 295px;
    height: 208px;
    margin: 0;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 2;
    display: inline-block;
    position: relative;
}

.guidebook-sample-pages-inner dd span figure:after {
    content: "";
    left: 0;
    bottom: 0;
    width: 295px;
    height: 208px;
    background-color: #000000;
    display: inline-block;
    position: absolute;
    transition: all 0.4s ease-in-out 0s;
    z-index: 10;
    opacity: 0;
}

.guidebook-sample-pages-inner dd span figure:hover:after {
    opacity: 0.6;
}

.guidebook-sample-pages-inner dd span figure p {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    line-height: 208px;
    left: 0;
    right: 0;
    width: 295px;
    height: 208px;
    margin: auto;
    z-index: 11;
    position: absolute;
    transition: all 0.4s ease-in-out 0s;
    opacity: 0;
}

.guidebook-sample-pages-inner dd span figure:hover p {
    opacity: 1;
    cursor: pointer;
}

.part01 {
    background-image: url(../img/guidebook/ja/page01_thumb.jpg);
}

.part02 {
    background-image: url(../img/guidebook/ja/page02_thumb.jpg);
}

.part03 {
    background-image: url(../img/guidebook/ja/page03_thumb.jpg);
}

.part04 {
    background-image: url(../img/guidebook/ja/page04_thumb.jpg);
}

.part05 {
    background-image: url(../img/guidebook/ja/page05_thumb.jpg);
}

.part06 {
    background-image: url(../img/guidebook/ja/page06_thumb.jpg);
}

/* LIGHTBOX */
.lightbox-target {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    display: none;
}

#part01 {
    display: none;
}

#part02 {
    display: none;
}

#part03 {
    display: none;
}

#part04 {
    display: none;
}

#part05 {
    display: none;
}

#part06 {
    display: none;
}

.lightbox-target:target img {
    height: 768px;
    vertical-align: top;
}

.lightbox-target .container {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
         -moz-transition: .5s ease-in-out;
             -o-transition: .5s ease-in-out;
                    transition: .5s ease-in-out;
}

a.lightbox-close {
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    color: #000000;
    background: #FFFFFF;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    position: absolute;
    display: block;
}

a.lightbox-close:hover {
    cursor: pointer;
}

/* LYANDI */
.guidebook-illustrator-inner,
.guidebook-buy-inner {
    border: 1px solid #D9E0E6;
    padding: 20px;
    margin: 20px 0;
    display: flex;
}

.guidebook-illustrator-inner p,
.guidebook-illustrator-inner dl,
.guidebook-buy-inner p,
.guidebook-buy-inner dl {
    flex-direction: row;
}

.guidebook-illustrator-inner p,
.guidebook-buy-inner p {
    height: 100%;
    padding-right: 20px;
}

.guidebook-illustrator-inner p img {
    -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
            -ms-border-radius: 50px;
             -o-border-radius: 50px;
                    border-radius: 50px;
}

.guidebook-illustrator-inner dt,
.guidebook-buy-inner dt {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.0;
    margin-bottom: calc(10px - (((16px * 1.0) - 10px) / 2));
}

.guidebook-illustrator-inner dd {
    font-size: 12px;
    margin-bottom: calc(12px - (((12px * 1.6) - 12px) / 2));
}

.guidebook-illustrator-inner dd ul li {
    width: 24px;
    height: 24px;
    margin-right: 6px;
    display: inline-block;
    float: left;
}

.guidebook-illustrator-inner dd ul li:last-child {
    margin-right: 0;
}

/* GUIDEBOOK BUY */
.guidebook-buy-inner {
    margin: 0 0 20px 0;
}

.guidebook-buy-inner dl {
    width: 100%;
}

.guidebook-buy-inner dl dd:nth-child(2) ul li {
    margin-bottom: 4px;
}

.guidebook-buy-inner dl dd:nth-child(2) ul li:last-child {
    margin-bottom: 0;
}

.guidebook-buy-inner dl dd:nth-child(3) ul {
    display: flex;
    justify-content: flex-start;
    margin-top: calc(12px - (((12px * 1.6) - 12px) / 2));
}

.guidebook-buy-inner dl dd:nth-child(3) ul li {
    flex-direction: row;
    width: 50%;
}

.guidebook-buy-inner dl dd:nth-child(3) ul li:nth-child(1) {
    padding-right: 5px;
}

.guidebook-buy-inner dl dd:nth-child(3) ul li:nth-child(2) {
    padding-left: 5px;
}

.guidebook-buy-inner dl dd:nth-child(3) ul li a {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    width: 100%;
    height: 50px;
    padding-left: 44px;
    display: inline-block;
    border: 1px solid #D9E0E6;
    background-color: #FFFFFF;
    background-position: 12px 13px;
    background-repeat: no-repeat;
    -webkit-transition: 0.6s;
         -moz-transition: 0.6s;
            -ms-transition: 0.6s;
                    transition: 0.6s;
}

.guidebook-buy-inner dl dd:nth-child(3) ul li a:hover {
    background-color: #f6fbff;
    -webkit-transition: 0.6s;
         -moz-transition: 0.6s;
            -ms-transition: 0.6s;
                    transition: 0.6s;
}

.guidebook-buy-inner dl dd:nth-child(3) #buy-amazon {
    background-image: url(../img/guidebook/ja/amazon_icon.png);
}

.guidebook-buy-inner dl dd:nth-child(3) #buy-rakuten {
    background-image: url(../img/guidebook/ja/rakuten_icon.png);
}
/********************************
/g_01
********************************/

/********************************
Guidebook02
********************************/
/* about */
.guidebook02-about .guidebook02-about-title {
    font-weight: bold;
    margin: 30px auto 20px auto; 
}

.guidebook02-about .guidebook02-about-title .about-title-01 {
    position: relative;
}

.guidebook02-about .guidebook02-about-title .about-title-01::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 55%;
  top: 20%;
  z-index: -1;
  background-color: #fafad4; 
}

.guidebook02-about .guidebook02-about-title .about-title-02 {
  color: #0299aa;
  font-size: 28px;
}

.guidebook02-about p {
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph;
}

.guidebook02-about-p02 {
    margin: 20px auto;
}

/* section-title-design */
.guidebook02-feature .feature-title,
.guidebook02-composition .composition-title{
    color: #0299aa;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 0 55px;
    margin-top: 40px;
}

.feature-title:before, .feature-title:after,
.composition-title:before, .composition-title:after {
    content: '';
    position: absolute;
    top: 40%;
    display: inline-block;
    width: 45px;
    height: 5px;
    background-color: #0299aa;
  }
  
.feature-title:before,
.composition-title:before {
    left: 28%;
  }

.feature-title:after,
.composition-title:after {
    right: 28%;
  }

/* feature */
.feature-contents {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 40px auto;
  }

.feature-contents div {
    width: 190px;
    height: 285px;
    border: 4px solid #92ddea;
    border-radius: 5px;
    position: relative;
} 

.feature-contents div h3 {
    text-align: center;
    margin: 30px auto 0px auto; 
    font-size: 16px;
    line-height: 20px;
}

.feature-contents div img {
    width: 130px;
    display:block;
    margin: 0 auto;
}

.feature-contents div p {
    font-size: 14px;
    width: 150px;
    margin: 0 auto;
}

.feature-contents div::before{
    position: absolute;
    top: -66px;
    left: 36px;
}

.feature-contents .feature-01::before{
    content:url(/img/guidebook/ja/guidebook_02/feature-01.png);
}

.feature-contents .feature-02::before{
    content:url(/img/guidebook/ja/guidebook_02/feature-02.png);
}

.feature-contents .feature-03::before{
    content:url(/img/guidebook/ja/guidebook_02/feature-03.png);
}


/* composition */
.composition-contents {
    width: 480px;
    margin: 0 auto 50px auto;
}

.composition-contents div h2{
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-left: 14px;
    height:40px;
}

.composition-contents div h2::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 22px;
    background-color: #00afcc;
    top: 0px;
    left: 0px;
}

.composition-contents div p {
    font-size: 16px;
    line-height: 24px;
}

.composition-example {
    margin-top: 20px;
    height: 225px;
}

.composition-example .composition-example-img {
    width: 310px;
    height: 225px;
    background-color: #ffeed0;
    border-radius: 7px;
    position: relative;
}

.composition-example .composition-example-img:after{
    content: "";
    left: 12px;
    bottom: 12px;
    width: 285px;
    height: 201px;
    border-radius: 4px;
    background-color: #000000;
    display: inline-block;
    position: absolute;
    transition: all 0.4s ease-in-out 0s;
    z-index: 10;
    opacity: 0;
}

.composition-example .composition-example-img .hover-h2 {
    position: absolute;
    left: 14%;
    top: 46%;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-align: center;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    z-index: 11;
}

.composition-example .composition-example-img:hover .hover-h2 {
    opacity: 1;
    cursor: pointer;
}

.composition-example .composition-example-img:hover:after {
    opacity: 0.6;
    cursor: pointer;
}

.composition-example .composition-example-img img {
    width: 285px;
    border-radius: 4px;
    margin: 12px;
}

.composition-example .chapter-number {
    margin-top: 40px;
}

.composition-arrow {
    clear: both;
    width: 0;
    height: 0;
    border-style: solid;
    margin: 30px auto;
    border-width: 27px 27px 0 27px;
    border-color: #eb6ea3 transparent transparent transparent;
}

.composition-example-img-right,
.chapter-number-right {
    float: right;
}

.composition-example-img-left,
.chapter-number-left{
    float: left;
}


/* producer , purchase , download*/
.guidebook02-author {
    width: 100%;
    height: 207px;
    border: 3px solid #92ddea;
    border-radius: 14px;
    display: flex;
    margin-bottom: 20px;
}

.guidebook02-author .yuriko-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #92ddea;
    margin: 40px 15px 0px 15px;
}

.guidebook02-author .author-profile {
    width: 473px;
}

.author-profile h3 {
    font-size: 18px;
}

.author-profile p {
    width: 473px;
    font-size: 14px;
    line-height: 21px;
}

.author-profile ul {
    display: flex;
    width: 170px;
    justify-content: space-between;
    margin-top: 8px;
}

.guidebook02-guest{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.guidebook02-guest .guest{
    width: 310px;
    height: 347px;
    border: 3px solid #92ddea;
    border-radius: 14px;
}

.guidebook02-guest .guest .guest-img {
    width: 103px;
    display: block;
    border-radius: 50%;
    border: 4px solid #92ddea;
    margin: 12px auto;
}

.guest-profile {
    width: 280px;
    margin: -10px auto;
}

.guest-profile h3 {
    font-size: 15px;
}

.guest-profile p {
    font-size: 14px;
    line-height: 19px;
    margin-top: 5px;
    text-align: justify;
    text-justify: inter-ideograph;
}

.guest-profile ul {
    display: flex;
    justify-content: space-between;
    width: 58px;
    margin-top: 8px;
}

.guidebook02-buy-inner {
    border: 3px solid #92ddea;
}

/********************************
/g_02
********************************/

/********************************
Guidebook03
********************************/
:root {
    --g03_gray: #c4ddec;
    --g03_txtc1: #224d68;
    --g03_sc1: #4F86C5;
    --g03_sc2: #13A5E0;
    --g03_sc5: #83AE27;
    --g03_sc7: #DB638B;
    --g03_sc8: #7D6FB1;
    --g03_shadow:
  }

.g03_sc1{
color: var(--g03_sc1);
}
.g03_sc2{
color: var(--g03_sc2);
}
.g03_sc5{
color: var(--g03_sc5);
}
.g03_sc7{
color: var(--g03_sc7);
}
.g03_sc8{
color: var(--g03_sc8);
}

.g03_big{
    font-size: 1.3em;
    line-height: 1.3em;
}

.g03_shadow{
    box-shadow: 10px 10px 0px var(--g03_gray);
}

.guidebook03 section{
	padding-bottom: 100px
}

.guidebook03 section:last-child {
	padding-bottom: 0
}
  
.g03_sc-title{
    color: var(--g03_txtc1);
    font-size: 21px;
    font-weight: 800;
    text-align: center;
    margin: auto;
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
  }

  .g03_sc-title:before, .g03_sc-title:after {
    border-top: 3px solid;
    border-color: var(--g03_gray);
    content: "";
    width: 3em; /* 線の長さ */
  }
  .g03_sc-title:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .g03_sc-title:after {
    margin-left: 1em; /* 文字の左隣 */
  }

.g03_node-title{
    margin: auto;
    text-align: center;
    font-size: 21px;
    color: var(--g03_txtc1);
}

.g03_about-box02 .g03_node-title{
    margin-top: 80px;
    margin-bottom: 20px;
}

h4.g03_node-title{
    display: block;
    width: 390px;
    text-align: center;
    margin: auto;
    border-bottom: dashed 2px var(--g03_gray);
}

.g03_yellow-marker{
    background:linear-gradient(transparent 70%, #FDF139 70%);
    font-weight: bold;
    margin: 0 5px;
    padding-bottom: 1px;
}

.bold{
    font-weight: bold;
}

.nowrap{
    display:inline-block;
}

/* ********** */


/* guidebook03-top */
#g03_concept-txt{
    font-size: 28px;
    font-weight: 800;
}
.guidebook03-top p{
    font-size: 16px;
    width: 90%;
    margin: auto;
}
.g03_top-container{
    width: 500px;
    margin: 50px auto auto;
    text-align: center;
    padding: 0px 10px 30px 10px;
    border:solid var(--g03_gray);
    border-radius: 5px;
    background-color: #FFF;
}

.g03_top-container h3{
    font-size: 21px;
}

.g03_top-container-box{
    list-style: disc;
    margin: 10px auto auto;
    width: 300px;
    text-align: left;
}
.g03_top-container-box li{
    font-size: 16px;
    display:inline-block;
    margin-top: 5px;
}
.g03_top-container-box li .yellow-marker{
    font-weight: bold;
}
  


/* guidebook03-about */
.g03_about-box01{
    width: 80%;
    border:solid var(--g03_gray);
    border-radius: 5px;
    padding: 0 0 20px 0;
    margin: 20px auto 0;
}

.g03_about-box01 h3{
    text-align: center;
}

.g03_section-table{
    width: auto;
    margin: 20px auto 0;
    font-size: 14px;
    font-weight: 500;
}
.g03_section-table th{
    width: 50px;
}
.g03_section-table td{
    width: 200px;
}

.g03_section-table td a{
    color: #000000;
    border-bottom: dotted 2px #87CEFA;
}

.g03_section-table td a:hover{
    color: #5fa3ce;
    border-bottom: dotted 2px #5fa3ce;
    text-decoration: none;
}


.g03_about-box02-inbox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.g03_book-about-flexbox{
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    margin-top: 20px;
}

.composition-example_g03-img  img{
    width: 95%;
    border:solid 8px var(--g03_gray);
    border-radius: 10px;
    padding: 2%;
}
    #g03_book-sc1 img{
        border-color: var(--g03_sc1);
    }
    #g03_book-sc2 img{
        border-color: var(--g03_sc2);
    }
    #g03_book-sc5 img{
        border-color: var(--g03_sc5);
    }
    #g03_book-sc7 img{
        border-color: var(--g03_sc7);
    }
    #g03_book-sc8 img{
        border-color: var(--g03_sc8);
    }

.g03_book-about_txt-item{
    margin: 20px;
    width: 42%;
}

.g03_book-about_txt-item h4{
    font-size: 18px;
    line-height: 20px;
}

.g03_book-about_txt-item p{
    display: block;
    width: 90%;
    font-size: 14px;
    margin: 20px auto;
    text-align: left;
}

/* ポップアップウィンドウ */
.composition-exampleg_03 {
    margin-top: 20px;
    height: 225px;
}

.composition-example_g03-img img:hover{
    opacity: 0.8;
    cursor: pointer;
}

.composition-example_g03-img .hover-h2 {
    position: absolute;
    left: 14%;
    top: 46%;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-align: center;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    z-index: 11;
}

.composition-example_g03-img:hover .hover-h2 {
    opacity: 1;
    cursor: pointer;
}

.composition-example_g03-img:hover:after {
    opacity: 0.6;
    cursor: pointer;
}

.composition-example_g03 .composition-example_g03-img img {
    width: 300px;
    border-radius: 10px;
}

.composition-example_g03 .chapter-number {
    margin-top: 40px;
}

.composition-arrow {
    clear: both;
    width: 0;
    height: 0;
    border-style: solid;
    margin: 30px auto;
    border-width: 27px 27px 0 27px;
    border-color: #eb6ea3 transparent transparent transparent;
}

.composition-example_g03-img-right,
.chapter-number-right {
    float: right;
}

.composition-example_g03-img-left,
.chapter-number-left{
    float: left;
}

/* LIGHTBOX */
.lightbox-target_g03 {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    display: none;
}


.lightbox-target_g03:target img {
    height: 768px;
    vertical-align: top;
}

.lightbox-target_g03 .container {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
         -moz-transition: .5s ease-in-out;
             -o-transition: .5s ease-in-out;
                    transition: .5s ease-in-out;
}

.lightbox-target_g03 .container img{
    border:solid 8px var(--g03_gray);
    border-radius: 10px;
    width: 90vw;
    max-width: 1080px;
    min-width: 800px;
}

/* guidebook03-producer */
.g03_producer-flexbox{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding-top: 50px;
}

.g03_producer-flexitem{
    width: 30%;
    text-align: center;
    margin: 0 10px;
    text-align: center;
}

.g03_icon{
    border:solid 4px var(--g03_gray);
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.g03_twitter-icon:hover{
    transform: scale(1.05);
}

.g03_producer-flexitem h5{
    font-size: 18px;
    line-height: 20px;
    margin:10px auto 0 auto;
    padding: 10px;
}

.g03_producer-flexitem p{
    font-size: 14px;
    text-align: start;
    margin-top: 20px;
    height: 100px;
}

.g03_illust-box{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-top: 20px;   
}
.g03_illust-box img{
    height: 120px;
    width: auto;
}

element.style {
}
.lightbox-target_g03 .container-illust {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.composition-example_g03 .composition-example_g03-img.illust img {
    height: 120px;
    width: auto;
    border-radius: 4px;
    border: none;
}

.lightbox-target_g03 .container-illust{
    width: 500px;
    height: auto;
}

.lightbox-target_g03 .container-illust img{
    width: 100%;
    height: auto;
}

/* 装飾 */
div.style5 {
    width: 100%;
    border-top: 2px dashed #c4ddec;
    margin: 50px 0;
}
/********************************
/g03
********************************/

/********************************
Guidebook04
  LATEST UPDATE : 2024/03/12
  AUTHER : SHIMIZU HIYORI
********************************/
:root {
    --g04_c1: #ee8372;
    --g04_c2: #ea8394;
    --g04_c3: #72b7b6;
    --g04_c4: #7bbb6e;
    --g04_c5: #7b7fa9;
  }

.guidebook04  {
    width: 640px;
}

.guidebook04 h4{
    margin: 0;
}

.guidebook04 {
    font-size: 14px;
    color: #333333;
    line-height: 1.8em;
    text-align: center;
}

.g04_text {
    width: 500px;
    text-align: left;
    margin: 0 auto;
}

.g04_bold {
    color: #ea8494;
    font-weight: 500;
    padding: 0 5px 0 5px;
}


/************* guidebook04-top *************/
.guidebook04-top .g04_banner {
    border-radius: 10px;
}

.g04_catch {
    margin: 50px 0 70px 0;
}

.g04_recommend > img {
    margin: 35px;
}

.g04_recommend {
    height: 185px;
    width: 450px;
    margin: 0 auto;
    border: solid 3px#73bab8;
    border-radius: 22px;
    margin-top: 70px;
}

.g04_recommend ul {
    width: 285px;
    text-align: left;
    margin: 0 auto;
    line-height: 2em;

}

.g04_recommend ul li {
    font-weight: 500;
    line-height: 0;
    margin-bottom: 20px;
}

.g04_recommend ul img {
    list-style: none;
    margin-right: 12px;
}

.g04_sec {
    margin: 100px 0 50px 0;
}

.g04_index {
    width: 430px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.g04_index-l {
    float: left;
}

.g04_index-r {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.g04_index ul li {
    margin: 15px 0;
}

.g04_index ul li a {
    color: #d7dee4;
    text-decoration: none;
    display: inline-block;
    padding: 10px 0;
    border: solid 2px #d7dee4;
    width: 200px;
    height: 75px;
    border-radius: 10px;
    font-weight: 500;
    transition: 0.2s;
    cursor: pointer;
}

.g04_index ul li .chapter {
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
}

.g04_index .g04_index-l li:nth-child(1) a:hover,
.g04_index .g04_index-r li:nth-child(3) a:hover {
    border: solid 2px var(--g04_c1);
    background-color: var(--g04_c1);
    color: #fff;
}

.g04_index .g04_index-r li:nth-child(1) a:hover,
.g04_index .g04_index-l li:nth-child(4) a:hover {
    border: solid 2px var(--g04_c2);
    background-color: var(--g04_c2);
    color: #fff;
}

.g04_index .g04_index-l li:nth-child(2) a:hover,
.g04_index .g04_index-r li:nth-child(4) a:hover {
    border: solid 2px var(--g04_c3);
    background-color: var(--g04_c3);
    color: #fff;
}

.g04_index .g04_index-r li:nth-child(2) a:hover,
.g04_index .g04_index-l li:nth-child(5) a:hover {
    border: solid 2px var(--g04_c4);
    background-color: var(--g04_c4);
    color: #fff;
}

.g04_index .g04_index-l li:nth-child(3) a:hover {
    border: solid 2px var(--g04_c5);
    background-color: var(--g04_c5);
    color: #fff;
}


/************* guidebook04-about *************/
.guidebook04-about {
    margin-bottom: 160px;
}

/* スライダーの設定 */
.splide2 .splide__slide {
    width: 500px;
    height: 540px;
    border-radius: 10px;
    margin: 0 auto;
}

.splide2 .splide__slide > img {
    margin-bottom: 35px;
    text-align: center;
}

.splide2 .splide__slide .g04_chapter-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    width: 350px;
    display: block;
    margin: 0 auto;
}

.splide2 .splide__slide .g04_chapter-title:after {
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
    margin-top: 10px;
}

.splide2 .splide__slide .g04_chapter-text {
    width: 400px;
    height: 50px;
    margin: 0 auto;
}

.splide2 .splide__slide p:last-child {
    text-align: left;
}

.composition-example_g04-img {
    width: 400px;
    margin: 0 auto;
}

.splide2 .splide__slide .g04_sample {
    margin: 27px 0 27px 0;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
}

.splide2 .splide__slide .g04_sample:hover {
    cursor: pointer;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
    transition: .5s;
    transform: translateY(3px);
}
  
/* g04_chapter1　g04_chapter6 */
.splide2 .g04_chapter1,
.splide2 .g04_chapter6 {
    border: solid 5px var(--g04_c1);
}

.splide2 .g04_chapter1 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c1), var(--g04_c1) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 220px;
}

.splide2 .g04_chapter6 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c1), var(--g04_c1) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 240px;
}

/* g04_chapter2　g04_chapter7 */
.splide2 .g04_chapter2,
.splide2 .g04_chapter7 {
    border: solid 5px var(--g04_c2);
}

.splide2 .g04_chapter2 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c2), var(--g04_c2) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 200px;
}

.splide2 .g04_chapter7 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c2), var(--g04_c2) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 250px;
}

/* g04_chapter3　g04_chapter8 */
.splide2 .g04_chapter3,
.splide2 .g04_chapter8 {
    border: solid 5px var(--g04_c3);
}

.splide2 .g04_chapter3 .g04_chapter-title:after,
.splide2 .g04_chapter8 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c3), var(--g04_c3) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 230px;
}

/* g04_chapter4　g04_chapter9 */
.splide2 .g04_chapter4,
.splide2 .g04_chapter9 {
    border: solid 5px var(--g04_c4);
}

.splide2 .g04_chapter4 .g04_chapter-title:after,
.splide2 .g04_chapter9 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c4), var(--g04_c4) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 230px;
}

/* g04_chapter5 */
.splide2 .g04_chapter5 {
    border: solid 5px var(--g04_c5);
}

.splide2 .g04_chapter5 .g04_chapter-title:after {
    background: radial-gradient(circle farthest-side, var(--g04_c5), var(--g04_c5) 60%, transparent 60%, transparent);
    background-size: 10px;
    width: 230px;
}

/* ページネーション */
.splide__pagination__page {
    border: none;
    opacity: 1;
    height: 6px;
    width: 6px;
}

.splide__pagination__page.is-active {
    transform: scale(1.1);
}

.g04_page {
    background-color: #d7dee4;
    color: #fff;
    height: 10px;
    width: 10px;
    margin-left: 2px;
    margin-right: 2px;
}

.g04_page.is-active {
    background-color: #656565;
    height: 10px;
    width: 10px;
}

  .g04_pagination {
    bottom: -60px;
}

  .g04_pagination li {
    margin-left: 5px;
    margin-right: 5px;
}

/* ポップアップウィンドウの設定 */
.lightbox-target_g04 {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1000;
    display: none;
}

.lightbox-target_g04:target img {
    height: 768px;
    vertical-align: top;
}

.lightbox-target_g04 .container {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
         -moz-transition: .5s ease-in-out;
             -o-transition: .5s ease-in-out;
                    transition: .5s ease-in-out;
}

.lightbox-target_g04 .container > img{
    border-radius: 10px;
    width: 90vw;
    max-width: 1080px;
    min-width: 800px;
}

.lightbox-target_g04 .lightbox-close {
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.7;
    color: #333;
    position: absolute;
}

.lightbox-target_g04 .container a img {
    position: relative;
    top: 19px;
}

.lightbox-target_g04 .lightbox-close:hover {
    opacity: 0.4;
    transition: all 0.4s;
}

/************* guidebook04-download *************/

.guidebook04-download {
    background: linear-gradient(45deg,#7c80ab, #ea8494, #ee8372);
    border-radius: 10px;
}

.guidebook04-download > img {
    margin-top: 70px;
}

.guidebook04-download > p {
    margin: 50px 0 40px 0;
    color: #ffffff;
}

.g04_download-inner {
    padding: 30px;
}

.g04_download-inner div {
    background-color: #ffffff;
    margin-bottom: 30px;
    border-radius: 10px;
}

.g04_download-inner div img:first-child{
    margin-top: 60px;
}

.g04_download-inner div img:nth-child(2) {
    margin: 40px 0 40px 0;
}

.g04_download-inner div p {
    width: 500px;
    margin: 0 auto;
    text-align: left;
    padding-bottom: 40px;
}

.purchase-btn {
    padding-bottom: 50px;
}

.purchase-btn a {
    display: inline-block;
    padding: 20px 70px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.purchase-btn a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
  }

  .purchase-btn a:hover::before {
    animation: shine 0.9s;
    }

    @keyframes shine {
    100% {
        left: 125%;
    }
}

/************* guidebook04-illustrator *************/
.g04_sec {
    width: 640px;
}

.guidebook04-illustrator p {
    color: #7c80ab;
    width: 420px;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-bottom: 60px;
}

.guidebook04-illustrator > img {
    margin-bottom: 50px;
}

.guidebook04-illustrator p:nth-child(3) {
    font-size: 18px;
    font-weight: 500;
}

.guidebook04-illustrator ul li {
    display: inline-block;
    padding: 0 5px 0 5px;
    margin-bottom: 100px;
}

/************* guidebook04-purchase *************/
.guidebook04-purchase {
    text-align: left;
}

/********************************
/g04
********************************/

/********************************
Guidebook05
  LATEST UPDATE : 2024/04/15
  AUTHER : YAMAGISHITAE
********************************/
:root {
    --g05_black: #003333;
    --g05_main: #f3518a;
    --g05_purple: #b566c6;
  }
  
.guidebook05{
    min-width: 200px;
}

.guidebook05 section {
    margin-top: 100px;
}

.guidebook05 section:first-child {
    margin-top: 0;
}

/************* guidebook05-top *************/
.guidebook05-top .g05_banner {
    border-radius: 10px;
}

.guidebook05-top .g05_catch {
    display: block;
    margin: 50px auto 0;
}

.g05_catch_image_box{
    position: relative;
    width: 100%;
    height: auto;
}
@keyframes g05_sway { 
    0% { 
        transform: rotate(0deg); 
    } 
    50% { 
        transform: rotate(10deg); 
    } 
    100% { 
        transform: scaleX(0deg); 
    } 
}
.g05_catch_image_box .g05_catch_image_icon {
    position: absolute;
    top: 10px;
    right: 100px;
    z-index: 10;
    animation: g05_sway 2s steps(1) infinite; 
}

.g05_catch_image_box .g05_catch-image {
    width: auto;
    margin: auto;
}

.g05-1_text{
    display: block;
    width: 570px;
    margin: 40px auto 0;
}
/************* g05_本書の構成*************/
.guidebook05-toc > ul{
    display: flex;
    flex-wrap: wrap;
    width: 450px;
    margin: auto;
}
.guidebook05-toc > ul li{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.guidebook05-toc > ul li img{
    opacity: 0.2;
}

.g05_toc_list{
    height: auto;
    border-radius: 25px;
    padding: 10px;
}

/* 吹き出し本体 */
.g05_balloon{
    display: flex;
    width: 350px;
    height: 30px;
    position: relative;
    align-items: center;
    background-color: #FFF;
    border: 2px solid var(--g05_black);
    border-radius: 10px;
    box-shadow: 6px 6px 0px 0px var(--g05_main);
    padding: 5px;
    margin-left: 20px;
}

.g05_balloon::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -6px;
    top: 7px;
    border-right: 6px solid var(--g05_black);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
/* 吹き出し三角の塗り */
.g05_balloon::after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -4px;
    top: 7px;
    border-right: 10px solid #FFF;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.g05_balloon p{
    color: var(--g05_black);
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: none;
    transition: 1s;
}

a.g05_toc-link{
    text-decoration: none;
}
.g05_toc img,.g05_balloon,.g05_balloon::after,.g05_balloon p{
    transition: all .2s;
}
/* ホバー時 */
.g05_toc:hover .g05_icon,.g05_toc:hover .g05_balloon,.g05_toc:hover .g05_balloon::after,.g05_toc:hover .g05_balloon p{
    transition: all .2s;
}
.g05_toc:hover .g05_icon{
    opacity: 1;
}
.g05_toc:hover .g05_balloon{
    color: #FFF;
    background-color: var(--g05_main);
    box-shadow: none;
    transform: translateX(5px) translateY(5px);
  }
.g05_toc:hover .g05_balloon::after{
    border-right: 10px solid var(--g05_main);
}
a.g05_toc-link:hover{
    text-decoration: none;
}

.g05_toc:hover .g05_balloon p{
    color: #FFF;
}

/************* g05_本書の内容 guidebook05-about *************/
/* chapter */
.g05_chapter{
    display: block;
    width: 540px;
    margin: auto;
    margin-bottom: 60px;
}
.g05_chapter h4.g05_chapter-tittle{
    position: relative;
    display: block;
    width: 100%;
    margin: auto;
    z-index: 10;
    top: 10px;
}
.composition-example_g05{
    display: block;
    width: 100%;
    position: relative;
    border: solid 2px var(--g05_main);
    border-radius: 10px;
    box-shadow: 10px 10px 0px 0px var(--g05_main);
    margin: auto;
    overflow:hidden;
}

.composition-example_g05-img{
    transition:1s all;
}

.g05_chapter-txt{
    width: 100%;
    color: var(--g05_black);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

/* ホバー時 */
.composition-example_g05-img:hover{
    transform:scale(1.2,1.2);
    transition:1s all;
    cursor: pointer;
}

.composition-example_g05-img:hover::after{
    content: "click!";
    position: relative;
    top: 190px;
    left: 270px;
}

/* ポップアップウィンドウの設定 */
.lightbox-target_g05 {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1000;
    display: none;
}

.lightbox-target_g05:target img {
    height: 768px;
    vertical-align: top;
}

.lightbox-target_g05 .container {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
         -moz-transition: .5s ease-in-out;
             -o-transition: .5s ease-in-out;
                    transition: .5s ease-in-out;
}

.lightbox-target_g05 .container > img{
    border-radius: 10px;
    width: 90vw;
    max-width: 1080px;
    min-width: 800px;
}

.lightbox-target_g05 .lightbox-close {
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.7;
    color: #333;
    position: absolute;
}

.lightbox-target_g05 .container a img {
    position: relative;
    top: 19px;
}
/* バツ印 */
.lightbox-close_g05_X {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
}
/* バツ印の棒共通 */
.lightbox-close_g05_X::before, .lightbox-close_g05_X::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 30px; /* 棒の高さ */
    background: #FFF;
    border-radius: 10px;
}

.lightbox-close_g05_X::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.lightbox-close_g05_X::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.lightbox-target_g05 .lightbox-close:hover {
    opacity: 0.4;
    transition: all 0.4s;
}

/************* g05_イラストレーター *************/
section.guidebook05-illustrator{
    margin-top: 90px;
}
.guidebook05-illustrator > img{
    display: block;
    width: 150px;
    height: 150px;
    border: solid 5px var(--g05_purple);
    border-radius: 100px;
    margin: auto;
    margin-top: 50px;
}
.g05_illustrator-box{
    width: 300px;
    margin: auto;
}
.g05_Illustrator-name{
    font-size: 24px;
    font-weight: bold;
    color: var(--g05_purple);
    text-align: center;
    margin-top: 25px;
}

.g05_Illustrator-about{
    font-size: 14px;
    margin-top: 20px;
}
/* SNSリンクまとめ */
.g05_illustrator-box > ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 136px;
    margin: auto;
    margin-top: 30px;
}
.g05_illustrator-box > ul > li{
    margin: 0 5px;
}

.g05_illustrator-box > ul > li > a >img:hover{
    transform: scale(1.1);
}
/************* g05_購入先 *************/
.guidebook05-purchase{
    margin-top: 60px;
}
/********************************
/g05
********************************/

/********************************
Guidebook06
  LATEST UPDATE : 2024/09/20
  AUTHER : SHIMIZU HIYORI
********************************/
/* guidebook06-common */
.guidebook06 {
    font-size: 14px;
    color: #fff;
    background-color: #333;
    line-height: 1.8em;
}

.fade-in {
    opacity: 0;
    transition-duration: 700ms;
    transition-property: opacity, transform;
}
  
.fade-in-up {
    transform: translate(0, 20px);
}
  
.fade-in-down {
    transform: translate(0, -20px);
}
  
.fade-in-left {
    transform: translate(-20px, 0);
}
  
.fade-in-right {
    transform: translate(20px, 0);
}
  
.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}


@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .guidebook06-DL ul li {
    opacity: 0;
  }
  
  .guidebook06-DL ul li.fade-in {
    animation: fadeIn 1s forwards;
  }

.g06_title {
    margin: 0 auto !important;
    padding: 23px 35px !important;
    margin-bottom: 50px !important;
    width: 600px;
    letter-spacing: 1.5px;
    background-color: #444444;
    border-radius: 50px;
    color: #ffffff;
    font-weight: bold;
    position: relative;
}

.g06_title img {
    position: absolute;
    top: 15px;
    right: 20px;
}

/* guidebook06-top */
.guidebook06-top {
    margin-bottom: 50px;
}

.g06_catch {
    margin: 0 auto;
    text-align: center;
}

.g06_text {
    margin: 0 auto;
    width: 500px;
}

/* guidebook06-about */
.guidebook06-about {
    margin-bottom: 50px
}

.guidebook06-about_bg {
    background-image: url("../img/guidebook/ja/guidebook_06/g06_bg.png");
    height: 730px;
    position: relative;
}

.guidebook06-about_bg > img:first-child {
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 5;
}

.guidebook06-about_bg > img:last-child {
    position: absolute;
    right: 0;
    bottom: -10px;
    z-index: 5;
}

.guidebook06-about_chapter {
    text-align: center;
}

.guidebook06-about_chapter span {
    background-color: #ccf1ff;
    border-radius: 100px;
    font-size: 15px;
    color: #333;
    font-weight: 900;
    width: 145px;
    display: block;
    margin: 30px auto 20px;
    padding: 6px
}

.guidebook06-about_chapter h2 {
    font-size: 24px;
    color: #333;
    line-height: 2em;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.slant-bg > div > img {
    position: absolute;
    top: 470px;
    left: 65px;
    transform: rotate(-10deg); 
}

.g06_L .slant-bg > div > img {
    left: 410px;
    transform: rotate(10deg); 
}

.guidebook06-about_chapter p {
    width: 310px !important;
    position: absolute;
    top: 500px;
    right: 90px;
    text-align: left;
    font-weight: 500;
}

.g06_L p {
    left: 90px;
}

.guidebook06_splide .splide__slide {
    height: auto;
    width: 100%;
  }

  .guidebook06_splide .splide__track {
    height: calc(730px)!important;
  }

.slant-bg > div div img {
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    top: 0;  
}

.slant-bg > div div img:hover {
    top: 7px; 
    transition: .5s;
}

/* 斜め背景 */
.slant-bg {
    width: 100%;
    margin: 0;
    padding: 120px 0;
    position: relative;
    top: 50px;
}

.slant-bg > div {
    position: absolute;
    top: 0;
    z-index: 4;
}

.slant-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #87d5f5;
    transform: skewY(10deg);
    z-index: 1;
}

.slant-bg::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    right: 0;
    background-color: #ccf1ff;
    transform: skewY(8deg);
    z-index: 0;
}

.g06_L .slant-bg::before {
    transform: skewY(-10deg);
}

.g06_L .slant-bg::after {
    transform: skewY(-8deg);
}

.scroll {
    padding-top: 60px;
    position: relative;
    text-align: center;
  }

  .scroll::before {
    animation: scroll 2s infinite;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    content: "";
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
  }

  @keyframes scroll {
    0% {
      opacity: 0;
      transform: rotate(-45deg) translate(0, 0);
    }
    40% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      transform: rotate(-45deg) translate(-20px, 20px);
    }
    100% {
      opacity: 0;
    }
  }

/* ポップアップウィンドウの設定 */
.lightbox-target_g06 {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 1000;
    display: none;
}

.lightbox-target_g06:target img {
    height: 768px;
    vertical-align: top;
}

.lightbox-target_g06 .container {
    top: 50vh;
    left: 50vw;
    margin: auto;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    -webkit-transition: .5s ease-in-out;
         -moz-transition: .5s ease-in-out;
             -o-transition: .5s ease-in-out;
                    transition: .5s ease-in-out;
}

.lightbox-target_g06 .container > img{
    border-radius: 10px;
    width: 90vw;
    max-width: 1080px;
    min-width: 800px;
}

.lightbox-target_g06 .lightbox-close {
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.7;
    color: #333;
    position: absolute;
}

.lightbox-target_g06 .container a img {
    position: relative;
    top: 19px;
}

/* バツ印 */
.lightbox-close_g06_X {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
}

/* バツ印の棒共通 */
.lightbox-close_g06_X::before, .lightbox-close_g06_X::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 30px; /* 棒の高さ */
    background: #FFF;
    border-radius: 10px;
}

.lightbox-close_g06_X::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.lightbox-close_g06_X::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.lightbox-target_g06 .lightbox-close:hover {
    opacity: 0.4;
    transition: all 0.4s;
}

/* guidebook06-DL */
.guidebook06-DL {
    margin-bottom: 50px;
}

.guidebook06-DL ul {
    width: 545px;
    margin: 0 auto 30px;
}

.guidebook06-DL li {
    display: inline-block;
    width: 250px;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    color: #c36faa;
    background-color: #f7f2f7;
    font-weight: 500;
}

.guidebook06-DL li p {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.guidebook06-DL li img {
    margin: 0 8px 0 5px;
}

/* guidebook06-illustrator */
.guidebook06-illustrator {
    color: #a53a89;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

.guidebook06-illustrator_bg {
    background-color: #f7f2f7;
    border-radius: 10px;
    width: 595px;
    margin: 0 auto;
    margin-top: 150px;
    padding: 80px 30px 30px 30px;
}

.guidebook06-illustrator > img {
    position: absolute;
    top:  -90px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: solid 5px #f7f2f7;
    border-radius: 100px;
}

.guidebook06-illustrator div span {
    background-color: #c36faa;
    border-radius: 100px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    width: 120px;
    display: block;
    margin: 15px auto;    
}

.guidebook06-illustrator h2 {
    display: inline;
    margin: 0 auto;
    font-size: 22px;
    font-weight: bold;
}

.guidebook06-illustrator div ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 150px;
    margin: 15px auto;
}

.guidebook06-illustrator div ul li {
    margin: 0 5px;
}

.guidebook06-illustrator div ul li a img:hover {
    transform: scale(1.1);
    transition: .5s;
}

.guidebook06-illustrator div p {
    width: 520px;
    margin: 0 auto;
    text-align: left;
}

/* guidebook06-purchase */
.guidebook06-purchase {
    color: #a53a89;
}

.guidebook06-purchase_bg {
    background-color: #f7f2f7;
    border-radius: 10px;
    width: 595px;
    margin: 0 auto;
    padding: 30px;
}

.guidebook06-purchase_L {
    float: left;
    width: 270px;
}

.guidebook06-purchase_L h2 {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.5;
}

.guidebook06-purchase_L > p {
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0;
}

.guidebook06-purchase_L ul {
    font-size: 11px;
    color: #606060;
}

.guidebook06-purchase_L .detail-btn a {
    background-color: #c36faa;
    border: 2px solid #c36faa
}

.guidebook06-purchase_R {
    float: right;
}

.guidebook06-purchase_R img {
    border-radius: 10px;
    margin-top: 5px;
}

/* guidebook06-logo */
.guidebook06-logo {
    padding: 70px 0;
    text-align: center;
}


/********************************
/g06
********************************/