{% extends 'default_frame.twig' %}{% block main %}<div class="about-page"> <div class="fade-content ObserveEle about-page-head" id="scaleElement"> <div class="about-page-head-inner"> <h1 class="about-page-head_title">{{ 'front.block.over_view.what_is_wish_s_sh_title' |trans }}</h1> <p class="about-page-head_desc"> {{ 'front.block.over_view.what_is_wish_s_sh_desc_1' |trans }} <br class="pc-only" /> {{ 'front.block.over_view.what_is_wish_s_sh_desc_2' |trans }} <br class="pc-only" /> {{ 'front.block.over_view.what_is_wish_s_sh_desc_3' |trans }} <br /> <br /> {{ 'front.block.over_view.what_is_wish_s_sh_desc_4' |trans }} <br class="pc-only"/> {{ 'front.block.over_view.what_is_wish_s_sh_desc_5' |trans }} <br class="pc-only"/> </p> </div> </div> <div class="fade-content ObserveEle about-safety"> <div class="ec-eyecatchRole"> <div class="ec-eyecatchRole__image"> <img src="/html/user_data/assets/img/item/about_lineup_img.jpg" alt="safety" role="presentation" /> </div> <div class="ec-eyecatchRole__intro"> <h3 class="ec-eyecatchRole__introTitle">{{'front.block.over_view.safety_title' |trans}}</h3> <p class="ec-eyecatchRole__introDescription"> {{'front.block.over_view.safety_desc_1' |trans}} <br class="pc-only" /> {{'front.block.over_view.safety_desc_2' |trans}} <br class="pc-only" /> {{'front.block.over_view.safety_desc_3' |trans}} <br /> <br /> <span> {{'front.block.over_view.safety_desc_4' |trans}} </span> <br /> <br /> {{'front.block.over_view.safety_desc_5' |trans}} <br /> {{'front.block.over_view.safety_desc_6' |trans}} <br /> {{'front.block.over_view.safety_desc_7' |trans}} <br /> {{'front.block.over_view.safety_desc_8' |trans}} <br /> {{'front.block.over_view.safety_desc_9' |trans}} <br /> <span> {{'front.block.over_view.safety_desc_10' |trans}} </span> </p> </div> </div> </div> <div class="fade-content ObserveEle about-save"> <div class="ec-eyecatchRole"> <div class="ec-eyecatchRole__image"> <img src="{{'img_path.about_safe_img'|trans}}" alt="{{'img_path.about_safe_img_alt_text'|trans}}" role="presentation" /> </div> <div class="ec-eyecatchRole__intro"> <h3 class="ec-eyecatchRole__introTitle">{{'front.block.over_view.long_term_storage_title' |trans}}</h3> <p class="ec-eyecatchRole__introDescription"> {{'front.block.over_view.long_term_storage_desc_1' |trans}} <br /> <br /> {{'front.block.over_view.long_term_storage_desc_2' |trans}}<br> {{'front.block.over_view.long_term_storage_desc_3' |trans}}<br class="pc-only"> {{'front.block.over_view.long_term_storage_desc_4' |trans}} </p> </div> </div> </div> <div class="fade-content ObserveEle about-effect"> <div class="ec-eyecatchRole"> <div class="ec-eyecatchRole__image"> <img src="{{'img_path.about_effect_img'|trans}}" alt="{{'img_path.about_effect_img_alt_text'|trans}}" role="presentation" /> </div> <div class="ec-eyecatchRole__intro"> <h3 class="ec-eyecatchRole__introTitle">{{'front.block.over_view.disinfection_and_deodorization_effects_title' |trans}}</h3> <p class="ec-eyecatchRole__introDescription"> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_1' |trans}}<br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_2' |trans}}<br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_3' |trans}}<br> <br><br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_4' |trans}} <br><br> <span>{{'front.block.over_view.disinfection_and_deodorization_effects_desc_5' |trans}}</span><br> <span>{{'front.block.over_view.disinfection_and_deodorization_effects_desc_6' |trans}}</span><br> <br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_7' |trans}}<br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_8' |trans}} <br> {{'front.block.over_view.disinfection_and_deodorization_effects_desc_9' |trans}} </p> </div> </div> </div></div><script>window.onload = (event) => { //========================================== //ベースとなる要素の取得スタイルの取得 //========================================== let srcScaleBaseElement = document.querySelector(".ec-layoutRole__contents"); //ベースとなる要素のマージンとパディング(左右)の取得 let paddingLeftSize = 0; let paddingRightSize = 0; let marginLeftSize = 0; let marginRightSize = 0; marginLeftSize = parseFloat(window.getComputedStyle(srcScaleBaseElement).marginLeft); marginRightSize = parseFloat(window.getComputedStyle(srcScaleBaseElement).marginRight); //ベースとなる要素の左右のマージンとパディングの合計値を計算 let LeftTotal = paddingLeftSize + marginLeftSize; let RightTotal = paddingRightSize + marginRightSize ; //========================================== ////スタイルを変更する要素の取得とスタイルの変更 //========================================== let targetScaleElement = document.getElementById("scaleElement"); targetScaleElement.style.marginLeft = "-" + LeftTotal + "px"; targetScaleElement.style.marginRight = "-" + RightTotal + "px";};</script>{% endblock %}