:root {

    /* Colors: */
    --unnamed-color-d1d1d1: #D1D1D1;
    --unnamed-color-323232: #323232;
    --unnamed-color-3e3e3e: #3E3E3E;
    --unnamed-color-e5e5e5: #E5E5E5;
    --unnamed-color-aaaaaa: #AAAAAA;
    --unnamed-color-f7f7f7: #F7F7F7;
    --unnamed-color-6e6e6e: #6E6E6E;
    --unnamed-color-ffffff: #FFFFFF;
    --unnamed-color-939393: #939393;
    --unnamed-color-3ab894: #3AB894;
    --unnamed-color-def2ec: #DEF2EC;
    --unnamed-color-75ccb3: #75CCB3;
    --unnamed-color-ff8b00: #FF8B00;
    --unnamed-color-ffbf72: #FFBF72;
    --unnamed-color-fff0dd: #FFF0DD;
    --unnamed-color-ff0000: #FF0000;

    /* Font/text values */
    --unnamed-font-family-noto-sans-jp: Noto Sans JP;
    --unnamed-font-family-tondo: Tondo;
    --unnamed-font-family-tbchibirgothicplusk-std: TBChibiRGothicPlusK Std;
    --unnamed-font-family-montserrat-alternates: Montserrat Alternates;
    --unnamed-font-family-a-p-otf-shuei-marugo-stdn: A P-OTF Shuei MaruGo StdN;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-600: 60rem;
    --unnamed-font-weight-800: 80rem;
    --unnamed-font-weight-900: 90rem;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-14: 1.4rem;
    --unnamed-font-size-16: 1.6rem;
    --unnamed-font-size-20: 2rem;
    --unnamed-font-size-22: 2.2rem;
    --unnamed-font-size-25: 2.5rem;
    --unnamed-font-size-26: 2.6rem;
    --unnamed-font-size-28: 2.8rem;
    --unnamed-font-size-30: 3rem;
    --unnamed-font-size-56: 5.6rem;
    --unnamed-font-size-62: 6.2rem;
    --unnamed-font-size-69: 6.9rem;
    --unnamed-font-size-90: 9rem;
    --unnamed-font-size-114: 11.4rem;
    --unnamed-character-spacing-0: 0rem;
    --unnamed-character-spacing-0-4: .04rem;
    --unnamed-character-spacing-0-44: .044rem;
    --unnamed-character-spacing-0-5: .05rem;
    --unnamed-character-spacing-1-3: .13rem;
    --unnamed-character-spacing-0-28: .028rem;
    --unnamed-character-spacing-0-32: .032rem;
    --unnamed-character-spacing-1-4: .14rem;
    --unnamed-character-spacing-1-38: .138rem;
    --unnamed-character-spacing-1-12: .112rem;
    --unnamed-line-spacing-26: 2.6rem;
    --unnamed-line-spacing-28: 2.8rem;
    --unnamed-line-spacing-32: 3.2rem;
    --unnamed-line-spacing-34: 3.4rem;
    --unnamed-line-spacing-35: 3.5rem;
    --unnamed-line-spacing-36: 3.6rem;
    --unnamed-line-spacing-39: 3.9rem;
    --unnamed-line-spacing-40: 4rem;
    --unnamed-line-spacing-45: 4.5rem;
    --unnamed-line-spacing-85: 8.5rem;
    --unnamed-line-spacing-104: 10.4rem;
    --unnamed-line-spacing-144: 14.4rem;
    --unnamed-line-spacing-262: 26.2rem;
    --unnamed-line-spacing-332: 33.2rem;
}

/* Character Styles */
.unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0-28);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0-32);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-800);
    font-size: var(--unnamed-font-size-22);
    line-height: var(--unnamed-line-spacing-39);
    letter-spacing: var(--unnamed-character-spacing-0-44);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-4 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-800);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-35);
    letter-spacing: var(--unnamed-character-spacing-0-4);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-5 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-800);
    font-size: var(--unnamed-font-size-26);
    line-height: var(--unnamed-line-spacing-34);
    letter-spacing: var(--unnamed-character-spacing-1-3);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-6 {
    font-family: var(--unnamed-font-family-tondo);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-114);
    line-height: var(--unnamed-line-spacing-332);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-7 {
    font-family: var(--unnamed-font-family-tondo);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-90);
    line-height: var(--unnamed-line-spacing-262);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}

.unnamed-character-style-8 {
    font-family: var(--unnamed-font-family-tondo);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-62);
    line-height: var(--unnamed-line-spacing-144);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-e5e5e5);
}

.unnamed-character-style-9 {
    font-family: var(--unnamed-font-family-tbchibirgothicplusk-std);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-22);
    line-height: var(--unnamed-line-spacing-28);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-10 {
    font-family: var(--unnamed-font-family-tbchibirgothicplusk-std);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-69);
    line-height: var(--unnamed-line-spacing-104);
    letter-spacing: var(--unnamed-character-spacing-1-38);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-11 {
    font-family: var(--unnamed-font-family-montserrat-alternates);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-30);
    line-height: var(--unnamed-line-spacing-40);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-3ab894);
}

.unnamed-character-style-12 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-800);
    font-size: var(--unnamed-font-size-25);
    line-height: var(--unnamed-line-spacing-45);
    letter-spacing: var(--unnamed-character-spacing-0-5);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-13 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-800);
    font-size: var(--unnamed-font-size-25);
    line-height: var(--unnamed-line-spacing-45);
    letter-spacing: var(--unnamed-character-spacing-0-5);
    color: var(--unnamed-color-ff8b00);
}

.unnamed-character-style-14 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-900);
    font-size: var(--unnamed-font-size-28);
    line-height: var(--unnamed-line-spacing-28);
    letter-spacing: var(--unnamed-character-spacing-1-4);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-15 {
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-600);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-36);
    letter-spacing: var(--unnamed-character-spacing-0-32);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-16 {
    font-family: var(--unnamed-font-family-montserrat-alternates);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-62);
    line-height: var(--unnamed-line-spacing-144);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ff8b00);
}

.unnamed-character-style-17 {
    font-family: var(--unnamed-font-family-montserrat-alternates);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-62);
    line-height: var(--unnamed-line-spacing-144);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-3e3e3e);
}

.unnamed-character-style-18 {
    font-family: var(--unnamed-font-family-a-p-otf-shuei-marugo-stdn);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-56);
    line-height: var(--unnamed-line-spacing-85);
    letter-spacing: var(--unnamed-character-spacing-1-12);
    color: var(--unnamed-color-3e3e3e);
}

html {
    font-size: calc(10 / 1366 * 100vw);
}

body {
    margin: 0 auto;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    /* width: 136.6rem; */
}

.pc_only {
    display: block
}

.sp_only {
    display: none;
}

/*fade表示関連*/

.fade_in {
  opacity: 0;
  transition: opacity 2.0s cubic-bezier(0, 0.42, 0.58, 1);
  /* transition: opacity 1.5s cubic-bezier(0, 0.42, 0.58, 1); */
  /* transform: translateY(-2rem); */
}

.fade_up {
  transform: translateY(2vw);
  opacity: 0;
  transition: all 1.2s cubic-bezier(0, 0.42, 0.58, 1);
}

.fade_in.is_show {
  opacity: 1;
  transition: 0.5s 0.5s all;
}

.fade_up.is_show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


.site_header_outer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 9rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 1.4rem 0 1.4rem 3.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site_logo {
    /* position: absolute; */
    /* top: 2.8rem; */
    /* left: 3.6rem; */
    display: block;
    width: 18.9rem;
    height: auto;
    /* background: transparent url("../img/logo.svg") 0% 0% no-repeat padding-box; */
    /* opacity: 1; */



    img {
        width: 100%;
    }
}

h1.site_title{
    font-size: 0;
}

.header_nav_toggle {
    display: none;
}

.header_nav_container {
    display: flex;
    gap: 3.7rem;
}

.header_nav_inner{
    display: flex;
    gap: 3.7rem;
}

.header_nav {
    /* position: absolute; */
    top: 0;
    right: 3.6rem;
    /* width: 133rem; */
    /* height: 9rem; */
    display: flex;
    align-items: center;
}

.header_nav_list {
    display: flex;
    gap: 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header_nav_link {
    color: var(--unnamed-color-3e3e3e);
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.header_nav_link:hover {
    opacity: 0.7;
}

.header_nav_item_otomo_about {
    /* position: absolute; */
    top: 3.7rem;
    left: 47.6rem;
    /* width: 6.9rem; */
    /* height: 1.9rem; */
}

.header_nav_link_otomo_about {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2.8rem;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.header_nav_item_otomo_features {
    /* position: absolute; */
    top: 3.7rem;
    left: 57.9rem;
    /* width: 12.2rem; */
    /* height: 1.9rem; */
}

.header_nav_link_otomo_features {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.header_nav_item_pain_points {
    /* position: absolute; */
    top: 3.7rem;
    left: 72.7rem;
    /* width: 9.2rem; */
    /* height: 1.9rem; */
}

.header_nav_link_pain_points {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.header_nav_item_solution_story {
    /* position: absolute; */
    top: 3.7rem;
    left: 86.1rem;
    /* width: 9.3rem; */
    /* height: 1.9rem; */
}

.header_nav_link_solution_story {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.header_nav_item_onboarding_flow {
    /* position: absolute; */
    top: 3.7rem;
    left: 98.9rem;
    /* width: 6.6rem; */
    /* height: 1.9rem; */
}

.header_nav_link_onboarding_flow {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.header_nav_item_faq {
    /* position: absolute; */
    top: 3.7rem;
    left: 109rem;
    /* width: 9.3rem; */
    /* height: 1.9rem; */
}

.header_nav_link_faq {
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-style: var(--unnamed-font-style-normal);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: .026rem;
    /* opacity: 1; */
}

.consult_button {
    /* position: absolute; */
    top: 1.4rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.5rem;
    height: 6.2rem;
    background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
    background: #FF8B00 0% 0% no-repeat padding-box;
    border-radius: 4rem 0 0 4rem;
    /* opacity: 1; */
    color: #FFFFFF;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    /* border: 0.3rem solid #ffffff; */
    border-right: none;
    transition: 0.3s all ease-in-out;
}

.consult_button:hover {
    color: #FF8B00;
    background: #fff;
    border: 0.3rem solid;
    border-right: none;
}

.character_img{
    position: relative;

}


/* KV */

.kv {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 71.1rem;
    margin-left: auto;
    margin-right: auto;
    background: transparent url("../img/AdobeStock_1925367999.jpg") 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: cover;
}

.otomo_character {
    position: absolute;
    top: 22.2rem;
    left: 18.3rem;
    width: 54.9rem;
    opacity: 1;

}

.shadow {
    position: absolute;
    top: 53.1rem;
    left: 29.3rem;
    right: 47.9rem;
    width: 30.7rem;
}

.summary_right {
    position: absolute;
    top: 17.7rem;
    /* left: 80rem; */
    width: 37.3rem;
    height: auto;
    /* opacity: 1; */
    right: 19.2rem;
}

.can {
    /* position: absolute; */
    top: 17.7rem;
    left: 80.1rem;
    width: 37.3rem;
    height: auto;
    /* opacity: 1; */
    margin-bottom: 5.37rem;
}

.lead {
    /* position: absolute; */
    top: 50.1rem;
    left: 79.9rem;
    width: 38rem;
    height: 5.8rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-600) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-34) var(--unnamed-font-family-noto-sans-jp);
    letter-spacing: var(--unnamed-character-spacing-0-32);
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font: normal normal 600 1.6rem/3.4rem Noto Sans JP;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.section_title {
    font-size: 0;
}


.section_container{

    .consult_button{
        display: none;
    }
}

/* About */
.otomo_about {
    position: relative;
    /* width: 136.6rem; */
    height: 58.2rem;
    background: transparent linear-gradient(0deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(0deg, #DEF2EC 0%, #F3FAE2 50%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
    /* opacity: 1; */


}

.otomo_about .title_en {
    position: absolute;
    top: 5.8rem;
    margin-left: 13.4rem;
    width: 32.5rem;
    height: 8.2rem;
    background: transparent url('../img/title_about_en.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_about .title_jp {
    position: absolute;
    top: 12.9rem;
    margin-left: 19.6rem;
    width: 21.3rem;
    height: 2.7rem;
    background: transparent url('../img/title_about.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_about .contents {
    position: relative;
    top: 16.3rem;
    height: 41.9rem;
    width: 100%;
}

.otomo_about .character_orange {
    position: absolute;
    top: 10.7rem;
    margin-left: 22.3rem;
    width: 17.1rem;
    height: auto;
    /* opacity: 1; */
}

.otomo_about .main_text {
    position: absolute;
    top: 8.1rem;
    margin-left: 45.9rem;
    width: 44.8rem;
    height: 8.1rem;
    font-size: 2.5rem;
    line-height: 4.5rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-weight: 800;
    color: #3E3E3E;
    text-align: center;
    letter-spacing: .05rem;
    /* opacity: 1; */
}

.otomo_about .text_color_orange {
    color: #ff8b00;
}

.otomo_about .sub_text {
    position: absolute;
    top: 19rem;
    margin-left: 43.8rem;
    width: 49rem;
    /* height: 6rem; */
    font-size: 1.6rem;
    line-height: 3.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-weight: 600;
    color: #3E3E3E;
    text-align: center;
    letter-spacing: .032rem;
    /* opacity: 1; */
}

.otomo_about .character_green {
    position: absolute;
    right: 0;
    margin-right: 25.7rem;
    width: 16.3rem;
    height: auto;
    /* opacity: 1; */
}

.character1 {
    width: 17.2rem;
}

.character2 {
    width: 16.3rem;
}

.shadow1 {
    width: 17.2rem;
    width: 4.8rem;
    position: absolute;
    left: 7rem;
    bottom: -2.4rem;
}

.shadow2 {
    width: 4.8rem;
    position: absolute;
    left: 5rem;
    bottom: -2rem;
}

/* What We Do */

.otomo_what_we_do {
    position: relative;
    height: 226.1rem;

}

.otomo_what_we_do .heading_container {
    position: relative;
    height: 52.1rem;
}

.otomo_what_we_do .title_en {
    position: absolute;
    top: 6.5rem;
    margin-left: 13.4rem;
    width: 65.7rem;
    height: 8.2rem;
    background: transparent url('../img/title_wwd_en.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .title_jp {
    position: absolute;
    top: 13.2rem;
    margin-left: 18.3rem;
    width: 28.3rem;
    height: 2.7rem;
    background: transparent url('../img/title_wwd.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .main_text {
    position: absolute;
    top: 23.7rem;
    margin-left: 43.4rem;
    width: 49.8rem;
    /* height: 17.1rem; */
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 2.5rem;
    line-height: calc(45 / 25);
    text-align: center;
    font-weight: 800;
    letter-spacing: .05rem;
}

.otomo_what_we_do .text_color_orange {
    color: #ff8b00;
}

.otomo_what_we_do .first_container {
    position: relative;
    height: 57.3rem;
}

.otomo_what_we_do .container_number {
    position: absolute;
}

.otomo_what_we_do .first_container .container_number {
    /* position: absolute; */
    margin-left: 18.5rem;
    width: 7rem;
    height: 4.4rem;
    background: transparent url('../img/num_01.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .first_container h3 {
    position: absolute;
    top: 6.2rem;
    margin-left: 18.3rem;
    width: 20.4rem;
    height: 3.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 2.5rem;
    line-height: 4.5rem;
    font-weight: 800;
    letter-spacing: .05rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .sub_text {
    position: absolute;
    top: 12rem;
    margin-left: 18.3rem;
    width: 46rem;
    height: 5.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .mini_box {
    position: absolute;
    width: 14.8rem;
    height: 5.5rem;
    background: transparent linear-gradient(90deg, var(--unnamed-color-fff0dd) 0%, #F3FAE2 50%, #F3FAE2 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(90deg, #FFF0DD 0%, #F3FAE2 50%, #F3FAE2 100%) 0% 0% no-repeat padding-box;
    border-radius: 1.5rem;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_1 .mini_box {
    top: 20.3rem;
    margin-left: 18.3rem;
}

.otomo_what_we_do .content_1 h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_1 .detail {
    position: absolute;
    top: 19.8rem;
    margin-left: 35.1rem;
    width: 31.6rem;
    height: 4.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: .028rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_2 .mini_box {
    top: 27.8rem;
    margin-left: 18.3rem;
}

.otomo_what_we_do .content_2 h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_2 .detail {
    position: absolute;
    top: 27.6rem;
    margin-left: 35.1rem;
    width: 31.6rem;
    height: 4.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: .028rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_3 h4 {
    position: absolute;
    top: 38.1rem;
    margin-left: 18.3rem;
    width: 3rem;
    height: 2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .border {
    position: absolute;
    top: 36.2rem;
    margin-left: 23rem;
    width: 0rem;
    height: 7rem;
    border: .1rem solid var(--unnamed-color-ff8b00);
    border: .1rem solid #FF8B00;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .content_3 .detail {
    position: absolute;
    top: 35.8rem;
    margin-left: 25rem;
    width: 39.6rem;
    height: 7.1rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .graph_img img {
    position: absolute;
    top: 5.1rem;
    right: 0;
    margin-right: 33.7rem;
    width: 32rem;
    box-shadow: .5rem .5rem 1.5rem #00000029;
    border-radius: .5rem;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .big_box {
    position: absolute;
    top: 8.2rem;
    right: 0;
    margin-right: 23.4rem;
    width: 38.6rem;
    height: 35rem;
    background: transparent linear-gradient(180deg, #FFF0DD 0%, #F3FAE2 50%, #F3FAE2 100%) 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .human_img {
    position: absolute;
    top: 26rem;
    right: 0;
    margin-right: 30.5rem;
    width: 19rem;
    height: 15.3rem;
    background: transparent url('../img/グループ 7846.svg') 0% 0% no-repeat padding-box;
    background-size: 19rem 15.3rem;
    /* opacity: 1; */
    background-size: contain;
}


.otomo_what_we_do .first_container .character_img{
    position: absolute;
    top: 20.9rem;
    right: 0;
    margin-right: 24.8rem;
    width: 12.8rem;
    height: auto;
}

.otomo_what_we_do .first_container .character_img .wwd_character {
    width: 100%;
    /* opacity: 1; */
}

.otomo_what_we_do .first_container .character_img .wwd_shadow {
    position: absolute;
    bottom: -2rem;
    left: 6rem;
    /* margin-right: 24.8rem; */
    width: 3.6rem;
    height: auto;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container {
    position: relative;
    height: 62.3rem;
}

.otomo_what_we_do .second_container .container_number {
    /* position: absolute; */
    right: 0;
    margin-right: 58.5rem;
    width: 7rem;
    height: 4.4rem;
    background: transparent url('../img/num_02.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .second_container h3 {
    position: absolute;
    top: 6.2rem;
    right: 0;
    margin-right: 35.1rem;
    width: 30.6rem;
    height: 3.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 2.5rem;
    line-height: 4.5rem;
    font-weight: 800;
    letter-spacing: .05rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .sub_text {
    position: absolute;
    top: 12rem;
    right: 0;
    margin-right: 18.3rem;
    width: 47.4rem;
    height: 5.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_1 .mini_box {
    top: 21.3rem;
    right: 0;
    margin-right: 51rem;
}

.otomo_what_we_do .content_1 h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_1 .detail {
    position: absolute;
    top: 21.1rem;
    right: 0;
    margin-right: 17.3rem;
    width: 31.6rem;
    /* height: 4.8rem; */
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: .028rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_2 .mini_box {
    top: 28.8rem;
    right: 0;
    margin-right: 51rem;
}

.otomo_what_we_do .content_2 h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_2 .detail {
    position: absolute;
    top: 28.7rem;
    right: 0;
    margin-right: 17.4rem;
    width: 31.6rem;
    /* height: 4.8rem; */
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: .028rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_3 h4 {
    position: absolute;
    top: 40.1rem;
    right: 0;
    margin-right: 62.7rem;
    width: 3rem;
    height: 2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .border {
    position: absolute;
    top: 38.4rem;
    right: 0;
    margin-right: 60.8rem;
    width: 0rem;
    height: 7rem;
    border: .1rem solid var(--unnamed-color-ff8b00);
    border: .1rem solid #FF8B00;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .content_3 .detail {
    position: absolute;
    top: 37.9rem;
    right: 0;
    margin-right: 18.9rem;
    width: 40rem;
    height: 7.1rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .graph_img img {
    position: absolute;
    top: 1.3rem;
    margin-left: 16.5rem;
    width: 36rem;
    box-shadow: 0rem 0rem 0rem #00000029;
    border-radius: .5rem;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .big_box {
    position: absolute;
    top: 10.1rem;
    margin-left: 24rem;
    width: 38.6rem;
    height: 35rem;
    background: transparent linear-gradient(180deg, #FFF0DD 0%, #F3FAE2 50%, #F3FAE2 100%) 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.otomo_what_we_do .second_container .human_img {
    position: absolute;
    top: 26.2rem;
    margin-left: 45rem;
    width: 17rem;
    height: 15.2rem;
    background: transparent url('../img/グループ 7842.svg') 0% 0% no-repeat padding-box;
    background-size: 19rem 15.3rem;
    /* opacity: 1; */
    background-size: contain;
}


.otomo_what_we_do .second_container .character_img{
    position: absolute;
    top: 29.8rem;
    margin-left: 32.3rem;
    width: 12.8rem;
    height: 13.8rem;
}

.otomo_what_we_do .second_container .character_img .wwd_character{
    width: 100%;
}

.otomo_what_we_do .second_container .character_img .wwd_shadow{
    position: absolute;
    bottom: -1rem;
    left: 4rem;
    /* margin-right: 24.8rem; */
    width: 3.6rem;
    height: auto;
}

.otomo_what_we_do .third_container {
    position: relative;
    height: 57.3rem;
}

.otomo_what_we_do .third_container .container_number {
    /* position: absolute; */
    right: 0;
    margin-right: 59.1rem;
    width: 7rem;
    height: 4.4rem;
    background: transparent url('../img/num_03.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .third_container h3 {
    position: absolute;
    top: 6.2rem;
    right: 0;
    margin-right: 35.7rem;
    width: 30.6rem;
    height: 3.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 2.5rem;
    line-height: 4.5rem;
    font-weight: 800;
    letter-spacing: .05rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .sub_text {
    position: absolute;
    top: 12rem;
    right: 0;
    margin-right: 18.9rem;
    width: 47.4rem;
    height: 5.8rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    letter-spacing: .032rem;
    color: #3E3E3E;
    /* opacity: 1; */
}


.otomo_what_we_do .third_container h4 {
    position: absolute;
    top: 32.6rem;
    right: 0;
    margin-right: 62.7rem;
    width: 3rem;
    height: 2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .border {
    position: absolute;
    top: 30.6rem;
    right: 0;
    margin-right: 60.8rem;
    width: 0rem;
    height: 7rem;
    border: .1rem solid var(--unnamed-color-ff8b00);
    border: .1rem solid #FF8B00;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .detail {
    position: absolute;
    top: 30.2rem;
    right: 0;
    margin-right: 19rem;
    width: 40rem;
    height: 7.1rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 1.4rem;
    line-height: 2.5rem;
    letter-spacing: .028rem;
    color: #ff8b00;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .graph_img img {
    position: absolute;
    top: -4.2rem;
    margin-left: 16.5rem;
    width: 40.5rem;
    height: 30.4rem;
    box-shadow: 0rem 0rem 0rem #00000029;
    border-radius: .5rem;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .big_box {
    position: absolute;
    top: 2.4rem;
    margin-left: 23.7rem;
    width: 38.6rem;
    height: 35rem;
    background: transparent linear-gradient(180deg, #FFF0DD 0%, #F3FAE2 50%, #F3FAE2 100%) 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .human_img {
    position: absolute;
    top: 22.5rem;
    margin-left: 22.6rem;
    width: 25.7rem;
    height: 15.7rem;
    background: transparent url('../img/グループ 7868.svg') 0% 0% no-repeat padding-box;
    background-size: 25.7rem 15.7rem;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_what_we_do .third_container .character_img {
    position: absolute;
    top: 18.1rem;
    margin-left: 45.8rem;
    width: 18.7rem;
    height: 11.9rem;
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .character_img .wwd_character {
    /* position: absolute; */
    top: 18.1rem;
    /* margin-left: 45.8rem; */
    width: 18.7rem;
    /* height: 11.9rem; */
    /* opacity: 1; */
}

.otomo_what_we_do .third_container .character_img .wwd_shadow {
    position: absolute;
    left: 4rem;
    /* margin-left: 45.8rem; */
    width: 10.4rem;
    height: auto;
    /* opacity: 1; */
}

.otomo_what_we_do .otomo_what_we_do .text_emphasis {
    font-size: 1.5rem;
    letter-spacing: .03rem;
    font-weight: 600;
}

/* Changes */

.otomo_changes {
    position: relative;
    height: 0rem;
    height: 190.9rem;
    background: transparent linear-gradient(0deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, #FCF3DE 86%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(0deg, #DEF2EC 0%, #F3FAE2 50%, #FCF3DE 86%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
    /* opacity: 1; */
}

.otomo_changes .main_container {
    position: relative;
    height: 51rem;
}

.otomo_changes .main_title_en {
    position: absolute;
    top: 9rem;
    margin-left: 13.8rem;
    width: 46.7rem;
    height: 10.6rem;
    background: transparent url('../img/title_changes_en.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_changes .main_title_jp {
    position: absolute;
    top: 16.2rem;
    margin-left: 18.3rem;
    width: 34.7rem;
    height: 2.7rem;
    background: transparent url('../img/title_changes.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_changes .main_heading {
    position: absolute;
    top: 27.6rem;
    margin-left: 35.9rem;
    width: 64.8rem;
    height: 12.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    font-size: 2.5rem;
    line-height: 4.5rem;
    letter-spacing: .05rem;
    font-weight: 800;
    text-align: center;
    /* opacity: 1; */
}

.otomo_changes .first_container {
    position: relative;
    height: 68.4rem;
}

.otomo_changes .second_container {
    position: relative;
}

.otomo_changes .first_container .title_box {
    z-index: 2;
    position: relative;
    margin-left: 44rem;
    width: 48.6rem;
    height: 10rem;
    border-radius: 5rem;
    background-color: #ff8b00;
    /* opacity: 1; */
}

.otomo_changes .first_container .sub_title_jp {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--unnamed-font-family-noto-sans-jp);
    width: 8rem;
    height: 5.2rem;
    font-weight: 800;
    text-align: center;
    font-size: 3.6rem;
    letter-spacing: .36rem;
    color: #FFFFFF
}

.otomo_changes .first_container .sub_title_en {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--unnamed-font-family-noto-sans-jp);
    width: 10rem;
    height: 2.2rem;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #FFFFFF
}

.otomo_changes .first_container .container_box {
    z-index: 1;
    position: relative;
    display: flex;
    top: -5rem;
    margin-left: 18.3rem;
    width: 100rem;
    height: 54.9rem;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 5rem;
    /* opacity: 1; */
    align-items: flex-start;
}

.otomo_changes .first_container .sub_heading {
    z-index: 2;
    position: absolute;
    top: 8.3rem;
    margin-left: 18.9rem;
    width: 62.4rem;
    /* height: 4rem; */
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: .056rem;
    color: #3e3e3e
}

.otomo_changes .first_container .before_content {
    position: relative;
    top: 16.7rem;
    width: 48.3rem;
}

.otomo_changes .first_container .after_content {
    position: relative;
    top: 16.7rem;
    width: 51.7rem;
    transition-delay: 1s;
}

.otomo_changes .first_container .before_content h4 {
    z-index: 2;
    position: absolute;
    top: 0rem;
    margin-left: 19.3rem;
    width: 6rem;
    height: 2.2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #aaaaaa
}

.otomo_changes .first_container .before_content .content_box {
    z-index: 2;
    position: relative;
    /* top: 3.5rem; */
    margin-left: 5.7rem;
    width: 33.8rem;
    height: 29.3rem;
    background: var(--unnamed-color-f7f7f7) 0% 0% no-repeat padding-box;
    background: #F7F7F7 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    margin-top: 3.5rem;
}

.otomo_changes .first_container .before_content .human_img {
    position: absolute;
    z-index: 3;
    bottom: 0;
    margin-bottom: 2.8rem;
    margin-left: 6.1rem;
    width: 20.6rem;
    height: 13.2rem;
    background: transparent url('../img/operations_b.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_changes .first_container .before_content .text {
    z-index: 3;
    position: absolute;
    top: 3.2rem;
    margin-left: 2rem;
    width: 30rem;
    height: 7.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.8rem;
    font-weight: 600;
    letter-spacing: .028rem;
    color: #3e3e3e
}

.otomo_changes .first_container .after_content h4 {
    z-index: 2;
    position: absolute;
    top: 0rem;
    right: 0;
    margin-right: 25.9rem;
    width: 4.4rem;
    height: 2.2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #FF8B00
}

.otomo_changes .first_container .after_content .content_box {
    z-index: 2;
    position: relative;
    /* top: 3.5rem; */
    right: 0;
    margin-right: 1.7rem;
    width: 47.2rem;
    height: 29.8rem;
    background: var(--unnamed-color-fff0dd) 0% 0% no-repeat padding-box;
    background: #FFF0DD 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    margin-top: 3.5rem;
}


.otomo_changes .first_container .after_content .text {
    z-index: 3;
    position: absolute;
    top: 2.3rem;
    margin-left: 2.6rem;
    width: 42rem;
    height: 9.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    letter-spacing: .032rem;
}

.otomo_changes .first_container .after_content .human_img {
    z-index: 3;
    position: absolute;
    top: 13.3rem;
    margin-left: 3.3rem;
    width: 25.1rem;
    height: 14.2rem;
    background: transparent url('../img/operations_a.svg') 0% 0% no-repeat padding-box;
    background-size: contain;
}

.otomo_changes .first_container .after_content .character_img img {
    z-index: 3;
    position: absolute;
    top: 16.8rem;
    right: 0;
    margin-right: 2.6rem;
    width: 16.2rem;
    height: 10.3rem;
}

.otomo_changes .first_container .triangle {
    position: absolute;
    top: 35.5rem;
    /* margin-left: 18.6rem; */
    width: 0;
    height: 0;
    border-right: 2.8rem solid #FF8B00;
    border-top: 2.6rem solid transparent;
    border-bottom: 2.6rem solid transparent;
    border-radius: .4rem;
    /* opacity: 1; */
    left: 42.6rem;
}

.otomo_changes .second_container .title_box {
    z-index: 2;
    position: relative;
    margin-left: 44rem;
    width: 48.6rem;
    height: 10rem;
    border-radius: 5rem;
    background-color: #3ab894;
    /* opacity: 1; */
}

.otomo_changes .second_container .sub_title_jp {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--unnamed-font-family-noto-sans-jp);
    width: 8rem;
    height: 5.2rem;
    font-weight: 800;
    text-align: center;
    font-size: 3.6rem;
    letter-spacing: .36rem;
    color: #FFFFFF
}

.otomo_changes .second_container .sub_title_en {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--unnamed-font-family-noto-sans-jp);
    width: 11.6rem;
    height: 2.2rem;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #FFFFFF
}

.otomo_changes .second_container .container_box {
    z-index: 1;
    position: relative;
    display: flex;
    top: -5rem;
    margin-left: 18.3rem;
    width: 100rem;
    height: 55.3rem;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 5rem;
    /* opacity: 1; */
}

.otomo_changes .second_container .sub_heading {
    z-index: 2;
    position: absolute;
    top: 8.6rem;
    margin-left: 18.9rem;
    width: 62.4rem;
    height: 4rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: .056rem;
    color: #3e3e3e
}

.otomo_changes .second_container .before_content {
    position: relative;
    top: 17rem;
    width: 48.3rem;
    height: 30.1rem;
}

.otomo_changes .second_container .after_content {
    position: relative;
    top: 17rem;
    width: 51.7rem;
    height: 30.6rem;
    transition-delay: 1s;
}

.otomo_changes .second_container .before_content h4 {
    z-index: 2;
    position: absolute;
    top: 0rem;
    margin-left: 19.1rem;
    width: 6rem;
    height: 2.2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #aaaaaa
}

.otomo_changes .second_container .before_content .content_box {
    z-index: 2;
    position: relative;
    /* top: 3.5rem; */
    margin-left: 5.7rem;
    width: 33.8rem;
    height: 30.2rem;
    background: var(--unnamed-color-f7f7f7) 0% 0% no-repeat padding-box;
    background: #F7F7F7 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    margin-top: 3.5rem;
}

.otomo_changes .second_container .before_content .human_img {
    position: absolute;
    z-index: 3;
    bottom: 0;
    margin-bottom: 3rem;
    margin-left: 3rem;
    width: 26.7rem;
    height: 13.5rem;
    background: transparent url('../img/management_b.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_changes .second_container .before_content .text {
    z-index: 3;
    position: absolute;
    top: 3.2rem;
    margin-left: 2rem;
    width: 30rem;
    height: 7.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.8rem;
    font-weight: 600;
    letter-spacing: .028rem;
    color: #3e3e3e
}

.otomo_changes .second_container .after_content h4 {
    z-index: 2;
    position: absolute;
    top: 0rem;
    right: 0;
    margin-right: 25.9rem;
    width: 4.4rem;
    height: 2.2rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0rem;
    color: #3ab894
}

.otomo_changes .second_container .after_content .content_box {
    z-index: 2;
    position: relative;
    /* top: 3.5rem; */
    right: 0;
    margin-right: 1.7rem;
    width: 47.2rem;
    height: 30.6rem;
    background: #DEF2EC 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    margin-top: 3.5rem;
}


.otomo_changes .second_container .after_content .text {
    z-index: 3;
    position: absolute;
    top: 3.3rem;
    margin-left: 2.6rem;
    width: 42rem;
    height: 9.6rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    letter-spacing: .032rem;
}

.otomo_changes .second_container .after_content .human_img {
    z-index: 3;
    position: absolute;
    top: 16.4rem;
    right: 0;
    margin-right: 3.7rem;
    width: 22.8rem;
    height: 10.9rem;
    background: transparent url('../img/management_a.svg') 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.otomo_changes .second_container .after_content .character_img img {
    z-index: 3;
    position: absolute;
    top: 16.5rem;
    margin-left: 2.3rem;
    width: 17rem;
    height: 10.8rem;
}

.otomo_changes .second_container .triangle {
    position: absolute;
    top: 31.6rem;
    /* margin-left: 42.6rem; */
    width: 0;
    height: 0;
    border-right: 2.8rem solid #3AB894;
    border-top: 2.6rem solid transparent;
    border-bottom: 2.6rem solid transparent;
    border-radius: 0.4rem;
    /* opacity: 1; */
    left: 42.6rem;
}

.text_color_orange {
    color: #ff8b00;
}

.text_color_green {
    color: #3ab894;
}

.otomo_changes .text_emphasis {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .036rem;
}

.otomo_changes .pc_only{
    display: inline;
}

/* case study */

.case_study {
    position: relative;
    height: 200rem;
}

.case_study_en {
    position: absolute;
    top: 10rem;
    left: 13.4rem;
    width: 60.3rem;
    height: auto;
    /* background-size: contain; */
}

.case_study_ja {
    position: absolute;
    top: 13rem;
    left: 18.3rem;
    width: 32.3rem;
    height: 10.6rem;
}

.case_container {
    position: relative;
    text-align: center;
    align-items: center;
}


.square {
    position: absolute;
    top: 25.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 82.5rem;
    height: 7.5rem;
    border: .1rem solid var(--unnamed-color-aaaaaa);
    border: .1rem solid #AAAAAA;
    border-radius: 3.8rem;
    /* opacity: 1; */
}

.case_topics {
    position: absolute;
    top: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-22)/4.4rem var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal bold 2.2rem/4.4rem Noto Sans JP;
    letter-spacing: .033rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.case_flow {
    position: absolute;
    display: flex;
    top: 47rem;
    left: 50%;
    transform: translateX(-50%);
    height: 104rem;
    gap: 4rem;
}

.category_not {
    /* height: 104.2rem; */
    position: relative;
}

.triangle {
    position: absolute;
    top: -6.1rem;
    left: 20.9rem;
    width: 6.1rem;
    height: 3.4rem;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-6e6e6e) 0% 0% no-repeat padding-box;
    background: #6E6E6E 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 3.2rem solid transparent;
    border-left: 3.2rem solid transparent;
    border-bottom: 3.5rem solid #6E6E6E;
}

.triangle_orange {
    position: absolute;
    top: -6.2rem;
    left: 20.8rem;
    color: #FF8B00;
    background: #FF8B00 0% 0% no-repeat padding-box;
    background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
    border-bottom-color: #FF8B00 !important;
}

.square2 {
    position: relative;
    /* margin-right: 4rem; */
    top: -4.1rem;
    /* left: 2rem; */
    width: 48rem;
    height: 80.7rem;
    background: var(--unnamed-color-e5e5e5) 0% 0% no-repeat padding-box;
    background: #E5E5E5 0% 0% no-repeat padding-box;
    border-radius: 4.5rem;
    /* opacity: 1; */
    z-index: 1;
}

.category_introduction {
    position: relative;
    width: 50%;




    .square2 {
        background: transparent linear-gradient(0deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
        background: transparent linear-gradient(0deg, #DEF2EC 0%, #F3FAE2 50%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
        border-radius: 4.5rem;
        /* opacity: 1; */
    }
}

.case_list {
    position: relative;
    top: 8rem;
    left: px;
}

.otomo_logo {
    position: absolute;
    top: -4.6rem;
    left: 12.9rem;
    width: 18.5rem;
    height: 3.4rem;
    /* opacity: 1; */
}

.otomo_logo2 {
    position: absolute;
    top: 3.3rem;
    left: 13.3rem;
    width: 17.8rem;
    height: 3.2rem;
    /* opacity: 1; */
    z-index: 2;
}

.conjunction {
    position: absolute;
    top: -4.6rem;
    left: 32.4rem;
    width: 2rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-800) 2.4rem/var(--unnamed-line-spacing-34) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font: normal normal 800 2.4rem/3.4rem Noto Sans JP;
    letter-spacing: .12rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.conjunction2 {
    position: absolute;
    top: 3.1rem;
    left: 32.5rem;
    width: 2.4rem;
    height: 3.5rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-800) 2.4rem/var(--unnamed-line-spacing-34) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: left;
    font: normal normal 800 2.4rem/3.4rem Noto Sans JP;
    letter-spacing: .12rem;
    color: #3E3E3E;
    opacity: 1;
    z-index: 2;
}


.not {
    position: absolute;
    top: -0.2rem;
    left: 12.7rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-800) 2.4rem/var(--unnamed-line-spacing-34) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal 800 2.4rem/3.4rem Noto Sans JP;
    letter-spacing: .12rem;
    color: #3E3E3E;
    text-transform: uppercase;
    opacity: 1;
}

.introduction {
    position: absolute;
    top: 7.7rem;
    left: 16.5rem;
    width: 15.5rem;
    height: 3.5rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-800) 2.4rem/var(--unnamed-line-spacing-34) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal 800 2.4rem/3.4rem Noto Sans JP;
    letter-spacing: .12rem;
    color: #3E3E3E;
    text-transform: uppercase;
    opacity: 1;
    z-index: 2;
}

.square3 {
    position: absolute;
    text-align: center;
    top: 13.7rem;
    left: 2.8rem;
    width: 42.5rem;
    height: 5.1rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.square3_2 {
    position: absolute;
    text-align: center;
    top: 13.7rem;
    left: 2.8rem;
    width: 42.5rem;
    height: 5.1rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    z-index: 2;
}

.hear {
    position: absolute;
    top: 1rem;
    left: .7rem;
    width: 41rem;
    height: 2.7rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal bold 1.6rem/2.8rem Noto Sans JP;
    letter-spacing: .024rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.orange {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-ff8b00);
    text-align: center;
    font: normal normal bold 1.6rem/2.8rem Noto Sans JP;
    letter-spacing: .024rem;
    color: #FF8B00;
}

.triangle2 {
    position: absolute;
    top: 20.3rem;
    left: 22.3rem;
    width: 3.3rem;
    height: 1.8rem;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-6e6e6e) 0% 0% no-repeat padding-box;
    background: #6E6E6E 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
    border-bottom: 1.8rem solid #6E6E6E;
}

.triangle2_2 {
    position: absolute;
    top: 20.2rem;
    left: 22.4rem;
    width: 3.3rem;
    height: 1.8rem;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
    background: #FF8B00 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
    border-bottom: 1.8rem solid #000;
    z-index: 2;
    border-bottom-color: var(--unnamed-color-ff8b00);
}

.square4 {
    position: absolute;
    top: 23.4rem;
    left: 2.8rem;
    width: 42.5rem;
    height: 35.6rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.square4_2 {
    position: absolute;
    top: 23.3rem;
    left: 2.9rem;
    width: 42.5rem;
    height: 35.6rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    z-index: 2;
}

.case_detail {
    position: absolute;
    top: 2.4rem;
    left: 8.3rem;
    width: 26rem;
    height: 13.6rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal bold 1.6rem/2.8rem Noto Sans JP;
    letter-spacing: .024rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.case_detail2 {
    position: absolute;
    top: 2.3rem;
    left: 3.7rem;
    width: 34rem;
    height: 13.6rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal bold 1.6rem/2.8rem Noto Sans JP;
    letter-spacing: .024rem;
    color: #3E3E3E;
    /* opacity: 1; */
    z-index: 2;
}

.think {
    position: absolute;
    top: 19.9rem;
    left: 13.8rem;
    width: 15.1rem;
    height: 12.4rem;
    /* background: transparent url('img/グループ 7939.png') 0% 0% no-repeat padding-box; */
    /* opacity: 1; */
}

.think2 {
    position: absolute;
    top: 17.2rem;
    left: 2.1rem;
    width: 12.6rem;
    height: 14.6rem;
    /* background: transparent url('img/グループ 7863.png') 0% 0% no-repeat padding-box; */
    /* opacity: 1; */
}

.otomo_orange {
    position: absolute;
    top: 19.9rem;
    left: 14.5rem;
    width: 10.6rem;
    height: 14.6rem;
    /* opacity: 1; */
    z-index: 2;
}

.materials {
    position: absolute;
    top: 17.6rem;
    left: 22.3rem;
    width: 18.2rem;
    height: 12.6rem;
    /* background: transparent url('img/01_3.png') 0% 0% no-repeat padding-box; */
    box-shadow: 0rem 0rem 0rem #00000029;
    border-radius: 2rem;
    /* opacity: 1; */
    z-index: 1;
}

.triangle3 {
    position: absolute;
    top: 61.2rem;
    left: 22.2rem;
    width: 3.3rem;
    height: 1.8rem;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-6e6e6e) 0% 0% no-repeat padding-box;
    background: #6E6E6E 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
    border-bottom: 1.8rem solid #6E6E6E;
}

.triangle3_2 {
    position: absolute;
    top: 61.1rem;
    left: 22.4rem;
    width: 3.3rem;
    height: 1.8rem;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    /* opacity: 1; */
    background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
    background: #FF8B00 0% 0% no-repeat padding-box;
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
    border-bottom: 1.8rem solid #000;
    z-index: 2;
    border-bottom-color: var(--unnamed-color-ff8b00);
}

.square5 {
    position: absolute;
    text-align: center;
    top: 65.2rem;
    left: 2.8rem;
    width: 42.5rem;
    height: 13rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
}

.square5_2 {
    position: absolute;
    top: 65rem;
    left: 2.8rem;
    width: 42.5rem;
    height: 13rem;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 3rem;
    /* opacity: 1; */
    z-index: 2;
}

.week {
    position: absolute;
    top: 3.8rem;
    left: 3.4rem;
    width: 35.6rem;
    height: 5.2rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal bold 1.6rem/2.8rem Noto Sans JP;
    letter-spacing: .024rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

.case_study .square6 {
    width: 48rem;
    height: 15.8rem;
    border-radius: 3rem;
    /* opacity: 1; */
}

.case_study .category_not .square6 {
    position: absolute;
    bottom: 1.3rem;
    background-color: #6E6E6E;
}

.case_study .x {
    position: absolute;
    top: 2.9rem;
    margin-left: 3rem;
    width: 9.6rem;
    height: 9.6rem;
}

.case_study .category_not .square6 p {
    position: absolute;
    top: 4.2rem;
    margin-left: 5.8rem;
    width: 36.4rem;
    height: 6.6rem;
    font-weight: 900;
    font-size: 2rem;
    line-height: 3.7rem;
    text-align: center;
    letter-spacing: .03rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    color: #FFFFFF;
    /* opacity: 1; */
}

.case_study .category_introduction .square6 {
    position: absolute;
    bottom: 1.3rem;
    background-color: #ffbf72;
}

.case_study .o {
    position: absolute;
    top: 1.7rem;
    margin-left: 1.8rem;
    width: 12.3rem;
    height: 12.3rem;
}

.case_study .category_introduction .square6 p {
    position: absolute;
    top: 4.2rem;
    margin-left: 5.8rem;
    width: 36.4rem;
    height: 6.6rem;
    font-weight: 900;
    font-size: 2rem;
    line-height: 3.7rem;
    text-align: center;
    letter-spacing: .03rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    color: #535353;
    /* opacity: 1; */
}

.case_study .category_not .triangle4 {
    position: absolute;
    top: 80rem;
    /* margin-left: 14.1rem; */
    width: 6.1rem;
    height: 3.4rem;
    transform: translateX(-50%) matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-6e6e6e) 0% 0% no-repeat padding-box;
    background: #6E6E6E 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 3.2rem solid transparent;
    border-left: 3.2rem solid transparent;
    border-bottom: 3.5rem solid #6e6e6e;
    left: 50%;
}

.case_study .category_introduction .triangle4 {
    position: absolute;
    top: 80rem;
    /* right: 0; */
    /* margin-right: 15.4rem; */
    width: 6.1rem;
    height: 3.4rem;
    transform: translateX(-50%) matrix(-1, 0, 0, -1, 0, 0);
    background: var(--unnamed-color-6e6e6e) 0% 0% no-repeat padding-box;
    background: #ff8b00 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    border-right: 3.2rem solid transparent;
    border-left: 3.2rem solid transparent;
    border-bottom: 3.5rem solid #ff8b00;
    left: 50%;
}

.case_study .suggest {
    position: absolute;
    top: 161rem;
    margin-left: 0rem;
    width: 74rem;
    height: 4.1rem;
    /* opacity: 1; */
    background-image: url('../img/グループ 7759.svg');
    /* writing-mode: lr; */
    border: 1px;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}

.case_study .btn {
    position: absolute;
    bottom: 16.8rem;
    left: 50%;
    transform: translate(-50%);
    width: 36.8rem;
    /* height: 8rem; */
    background-color: #FF8B00;
    box-shadow: .3rem .3rem 1rem #00000034;
    border: .3rem solid #ff8b00;
    border-radius: 4rem;
    /* opacity: 1; */
    display: block;
    color: #fff;
    font-weight: 900;
    font-size: 2.6rem;
    text-decoration: none;
    text-align: center;
    padding: 2.1rem 0;
    line-height: 1;
    transition: 0.3s all ease-in-out;
}

.case_study .btn:hover {
    background-color: #fff;
    color: #FF8B00;
}

.case_study .btn p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11rem;
    height: 3.7rem;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    text-align: center;
    font-size: 2.6rem;
    letter-spacing: .13rem;
    font-weight: 800;
    color: #ffffff;
}

.case_study .character_orange {
    position: absolute;
    bottom: 11.3rem;
    margin-left: 28.8rem;
    width: 17.1rem;
    height: 18.4rem;
    /* opacity: 1; */

    .case_character{
        width: 100%;
    }

    .case_shadow{
        position: absolute;
        left: 7rem;
        width: 4.9rem;
        bottom: 0.5rem;
    }
}

.case_study .character_green{
    position: absolute;
    bottom: 11.3rem;
    right: 0;
    margin-right: 29.8rem;
    width: 16.3rem;
    height: 19.5rem;
    /* opacity: 1; */

    .case_character{
        width: 100%;
    }

    .case_shadow{
        left: 5rem;
        position: absolute;
        width: 4.9rem;
        bottom: 1rem;
    }
}



/* flow */

.flow {
    position: relative;
    background: transparent linear-gradient(1deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, #FCF3DE 86%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(1deg, #DEF2EC 0%, #F3FAE2 50%, #FCF3DE 86%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    width: auto;
    height: 79.3rem;
}

.flow_en {
    position: absolute;
    top: 4.5rem;
    left: 14.1rem;
    width: 24.4rem;
    height: 8.2rem;
    /* opacity: 1; */
}

.flow_ja {
    position: absolute;
    top: 11.6rem;
    left: 18.3rem;
    width: 26.6rem;
    height: 2.7rem;
    /* opacity: 1; */
}

.item_flow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.item_containar:nth-child(1){
    transition-delay: 0s;
}
.item_containar:nth-child(2){
    transition-delay: 0.3s;
}
.item_containar:nth-child(3){
    transition-delay: 0.6s;
}
.item_containar:nth-child(4){
    transition-delay: 0.9s;
}

.item_containar {
    position: relative;
    text-align: center;
    margin-right: 2.5rem;
    width: 23rem;
}

.item_containar:nth-of-type(4) {
    margin-right: 0;
}

.number {
    position: absolute;
    top: -1.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6.8rem;
    height: 4.6rem;
    z-index: 2;
}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11rem;
}

.item_containar:nth-of-type(1) .icon {
    /* margin-top: 1.5rem; */
    width: 11rem;
}

.item_containar:nth-of-type(2) .icon {
    /* margin-top: 1.5rem; */
    width: 10rem;
}

.item_containar:nth-of-type(3) .icon {
    /* margin-top: 1.5rem; */
    width: 9rem;
}

.circle {
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    z-index: 1;
    position: relative;
}


.flow_title {
    position: absolute;
    top: 25.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-800) var(--unnamed-font-size-20)/var(--unnamed-line-spacing-28) var(--unnamed-font-family-noto-sans-jp);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal 800 2rem/2.8rem Noto Sans JP;
    letter-spacing: .06rem;
    color: #3E3E3E;
    text-transform: uppercase;
    /* opacity: 1; */
}


.flow_text {
    position: absolute;
    top: 30.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 19.4rem;
    height: 4.6rem;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-600) var(--unnamed-font-size-14)/var(--unnamed-line-spacing-26) var(--unnamed-font-family-noto-sans-jp);
    letter-spacing: var(--unnamed-character-spacing-0-28);
    color: var(--unnamed-color-3e3e3e);
    text-align: center;
    font: normal normal 600 1.4rem/2.6rem Noto Sans JP;
    letter-spacing: .028rem;
    color: #3E3E3E;
    /* opacity: 1; */
}

/* fandq */

.fandq {
    position: relative;
    /* height: 170rem; */
    padding-bottom: 7rem;
}

.fandq_heading {
    position: relative;
    height: 26.2rem;
}

.fandq_logo {
    position: absolute;
    top: 7.8rem;
    margin-left: 14.1rem;
    width: 20.1rem;
    height: 9.4rem;
    background: transparent url("../img/title_faq_en.svg") 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    background-size: contain;
}

.fandq_title {
    top: 14.5rem;
    margin-left: 18.3rem;
    position: absolute;
    width: 35.1rem;
    height: 2.7rem;
    /* opacity: 1; */

    img {
        width: 100%;
    }
}

.question_square {
    position: relative;
    margin-left: 18.3rem;
    width: 100rem;
    height: 8.8rem;
    background: #FAFAFA;
    border-radius: 3rem;
    /* opacity: 1; */
    margin-bottom: 2.7rem;
}

.fandq .q {
    position: absolute;
    top: 3.3rem;
    margin-left: 3.3rem;
    width: 3.7rem;
    height: 2.4rem;
}

.question_square p {
    position: absolute;
    top: 2.8rem;
    margin-left: 10.3rem;
    font-size: 2rem;
    font-weight: 800;
    color: #3e3e3e;
    font-family: var(--unnamed-font-family-noto-sans-jp);
}

.fandq_border {
    position: absolute;
    top: 4.2rem;
    right: 0;
    margin-right: 4rem;
    width: 2rem;
    height: .3rem;
    /* background: transparent url("../img/add-plus-button.svg") 0% 0% no-repeat padding-box; */
    cursor: pointer;
}

.fandq_border::before{
    position: absolute;
    content: '';
    display: block;
    width: 2rem;
    height: .3rem;
    background: transparent url("../img/add-plus-button.svg") 0% 0% no-repeat padding-box;

}

.fandq_border::after{
    position: absolute;
    content: '';
    display: block;
    width: 2rem;
    height: .3rem;
    background: transparent url("../img/add-plus-button.svg") 0% 0% no-repeat padding-box;
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
    top: 0.1rem;
    left: -0.1rem;
}

.question_square.is_open .fandq_border::after{
    transform: rotate(0);
}

.fandq .answer {
    position: relative;
    width: 100%;
    padding-left: 10.3rem;
    /* padding-top: 2.2rem;
    padding-bottom: 4.7rem; */
    font-size: 1.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    color: #3e3e3e;
    font-family: var(--unnamed-font-family-noto-sans-jp);
    letter-spacing: .032rem;
    overflow: hidden;
    margin-left: 18.3rem;
    max-width: 100rem;
    height: 0;
}

.fandq .answer.is_collapsed {
    display: none;
}


.fandq .answer_inner {
    /* padding-top: 2.2rem; */
    padding-bottom: 4.7rem;
}

.fandq .a {
    position: absolute;
    top: 1.3rem;
    margin-left: -7.1rem;
    width: 3.7rem;
    height: 2rem;
}

/* footer */

footer {
    position: relative;
    background: transparent linear-gradient(1deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, #FCF3DE 86%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(1deg, #DEF2EC 0%, #F3FAE2 50%, #FCF3DE 86%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
    /* opacity: 1; */
    width: 100%;
    height: 70.3rem;
}

.copyright {
    position: absolute;
    bottom: 10.2rem;
    left: 50%;
    width: 26.4rem;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.3rem;
    font-family: Tondo, Regular;
    color: #AAAAAA;
    background-image: url('../img/copyright.svg');
    background-size: contain;
    height: 1.5rem;
    background-repeat: no-repeat;
}

.consultation {
    background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
    border-radius: 4rem;
    box-shadow: .3rem .3rem 1rem #00000034;
    /* opacity: 1; */
    font-family: Noto Sans JP, ExtraBold;
    font-size: 2.6rem;
    color: white;
    border: .3rem solid #ff8b00;
    padding: 2.1rem 26.6rem 2.2rem 26.6rem;
    position: absolute;
    bottom: 17.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 900;
    text-decoration: none;
    transition: 0.3s all ease-in-out;
}

.consultation:hover{
    color: #ff8b00;
    background-color: #fff;

}

.box {
    position: relative;
}

.box .letter {
    position: absolute;
    top: 12.182rem;
    left: 22.435rem;
    width: 39.8rem;
    height: 11.6rem;
}

.subtitle {
    position: absolute;
    top: 29.9rem;
    left: 23.3rem;
    width: 38.4rem;
    height: 7.2rem;

}


.character {
    position: absolute;
    top: 10.7rem;
    bottom: 35.4rem;
    left: 70.6rem;
    right: 24.4rem;
}

.footer_character{
    position: absolute;
    width: 46.2rem;
    top: 10.7rem;
    bottom: 35.4rem;
    left: 70.6rem;
    right: 24.4rem;
    
    
    

    .character{
        width: 100%;
        position: initial;
    }

    .character_shadow{
        position:absolute;
        left: 10rem;
        bottom: -4rem;
        width: 25.8rem;
    }

}


@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.otomo_character,
.character1,
.character2,
.wwd_character,
.case_character ,
.footer_character .character{
  animation: float 2s ease-in-out infinite;
}


/* お問い合わせ */

.contact{
    padding-bottom: 7rem;
}

.form_wrap{
    width: 100rem;
    margin: auto;
    font-size: 1.6rem;


    .form_row{
        display: flex;
        justify-content: space-between;
        margin-bottom: 3rem;
        padding: 0.5rem 0;
    }

    .form_input{
        width: 100%;
        max-width: 70rem;
    }

    .error{
        color: #ff8b00;
    }

    input,select,textarea{
        width: 100%;
        max-width: 70rem;
        padding: 0.5rem;
    }

    input[name="privacy"]{
        width: auto;
        margin-right: 0.7em;
    }

    .privacy_text{
        margin-bottom: 2rem;
    }

    .checkbox_label{
        gap: 2rem;
        margin-bottom: 1.5rem;
        display: block;
    }

    select{
        /* appearance: none; */
        background-color: #fff;
        border: 1px solid #707070;
        border-radius: 0;
    }

    textarea{
        height: 20rem;
        resize: none;
    }

    .confirm_btn,.submit_btn, .back_btn{
        background: var(--unnamed-color-ff8b00) 0% 0% no-repeat padding-box;
        border-radius: 4rem;
        box-shadow: .3rem .3rem 1rem #00000034;
        /* opacity: 1; */
        font-size: 2.6rem;
        color: white;
        border: .3rem solid #ff8b00;
        padding: 2.1rem 13rem 2.2rem;
        font-weight: 900;
        text-decoration: none;
        transition: 0.3s all ease-in-out;
        margin: auto;
        line-height: 1;
        display: block;
    }

    .required{
        background-color: #ff8b00;
        color: #fff;
        border-radius: 2rem;
        padding: 0.2em 1.4rem;
        font-size: 1.2rem;
    }

    .button_area{
        display: flex;
        gap: 3rem;
        justify-content: center;
    }

    .submit_btn, .back_btn{
        margin: 0;
        width: 37.7rem;
    }

    .back_btn{
        background-color: #fff;
        color: #ff8b00;
    }
}


.contact_title{
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 4rem;
}

@media screen and (max-width: 766.98px) {
    html {
        font-size: calc(10 / 375 * 100vw);
        /* 画面幅375pxで10px*/
    }

    .pc_only {
        display: none !important;
    }

    .sp_only {
        display: block !important;
    }


    .site_header_outer {
        height: 5.5rem;
        padding: 1.6rem 2rem 1.6rem 1.6rem;
    }

    .site_logo {
        width: 12.7rem;
        position: relative;
        z-index: 9999;
    }

    .header_nav_container {
        /* display: none; */
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        display: block;
        pointer-events: none;
    }

    .header_nav_container.is_active {
        /* display: block; */
        pointer-events: auto;
        
        
        

        .header_nav_inner {
            opacity: 1;
        }
    }

    .header_nav_toggle {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        position: relative;



        .bar {
            display: block;
            width: 2.4rem;
            height: 0.2rem;
            background-color: #3E3E3E;
            border-radius: 0.5rem;
            /* transition: 0.2s all ease-in-out; */
        }
    }

    .header_nav_toggle.is_active {
        transform: translate(1rem, 1rem);

        .bar:first-child {
            transform: rotate(45deg)translate(-0.3rem, -0.1rem);
            transform-origin: top left;
            width: 3.5rem;
        }

        .bar:nth-child(2) {
            opacity: 0;
        }

        .bar:nth-child(3) {
            transform: rotate(-45deg) translate(-0.5rem, 0.1rem);
            transform-origin: top left;
            width: 3.5rem;
        }
    }

    .header_nav_inner {
        background: transparent linear-gradient(0deg, var(--unnamed-color-def2ec) 0%, #F3FAE2 50%, var(--unnamed-color-fff0dd) 100%) 0% 0% no-repeat padding-box;
        background: transparent linear-gradient(0deg, #DEF2EC 0%, #F3FAE2 50%, #FFF0DD 100%) 0% 0% no-repeat padding-box;
        /* width: 100%; */
        height: 100%;
        padding: 10.4rem 4.8rem 4.8rem;
        opacity: 0;
        transition: 0.5s all ease-in-out;
        display: block;
        

        .consult_button {
            border-radius: 4rem;
            width: 21rem;
            margin-top: 4.2rem;
        }

        .header_nav_link {
            font-size: 1.6rem;
        }
    }

    .header_nav_list {
        flex-direction: column;
        gap: 3rem;
    }




    .kv {
        height: 57.7rem;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: 3.2rem;
        background-size: 122% 105%;
    }

    .summary_right {
        position: static;
        padding-top: 9rem;
        width: auto;
    }

    .can {
        width: 21rem;
        padding-left: 3.8rem;
        margin-bottom: 2.4rem;
    }

    .lead {
        font-size: 1.4rem;
        padding-left: 4rem;
        /* padding-right: 2rem; */
        width: auto;
        line-height: 2;
    }

    .otomo_left {
        text-align: center;
    }

    .otomo_character {
        position: static;
        width: 26rem;
    }

    .shadow {
        width: 17.5rem;
        margin: auto;
        left: 10rem;
        bottom: 8rem;
        top: auto;
    }

    .section_title {
        position: relative;
        margin-bottom: 4.8rem;
    }

    .section_container{

        .consult_button{
            display: flex;
            position: absolute;
            top: 3rem;
            right: 0;
            z-index: 9;
            /* left: auto; */
            margin-left: auto;
            margin-top: 0rem;
            /* bottom: 2rem; */
            position: sticky;
            top: 8rem;
            /* bottom: 2rem; */
            margin-top: 3rem;
        }
    }

    .otomo_about {
        padding: 4rem 2.5rem 23.8rem;
        height: auto;
        margin-top: -9.3rem;
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        .title_en {
            width: 14.4rem;
            margin-left: -1.2rem;
            height: 3.6rem;
            position: static;
        }

        .title_jp {
            width: 15.8rem;
            margin-left: auto;
            bottom: -2rem;
            /* left: 1.2rem; */
            top: auto;
        }

        .contents {
            position: initial;
            height: auto;
            margin: 4.2rem 0 1.5rem;
            display: flex;
            flex-direction: column;
        }

        .main_text {
            font-size: 2.2rem;
            position: initial;
            width: auto;
            margin: auto;
            height: auto;
            line-height: 3.9rem;
        }

        .sub_text {
            position: initial;
            font-size: 1.5rem;
            margin: auto;
            width: auto;
            text-align: left;
            margin-top: 1.6rem;
            line-height: 3rem;
        }

        .character_orange {
            width: 13.3rem;
            /* position: initial; */
            top: 39rem;
            left: 4rem;
            margin: 0;
        }

        .character1 {
            width: 100%;
        }

        .shadow1{
            left: 5rem;
        }
        .shadow2 {
            /* width: 100%; */
            left: 3.8rem;
        }

        .character_green {
            width: 12.7rem;
            margin: 0;
            top: 43rem;
            right: 6rem;
        }

        .character2 {
            width: 100%;
        }
    }

    .otomo_what_we_do {
        height: auto;
        padding: 6rem 2.5rem 5.2rem;


        .title_en {
            width: 28.8rem;
            height: 3.6rem;
            margin: 0;
            position: initial;
            margin-left: -1.2rem;
            position: initial;
        }

        .title_jp {
            margin: 0;
            width: 20.6rem;
            position: initial;
            bottom: -1.3rem;
            position: absolute;
            top: auto;
            height: 2rem;
        }

        .heading_container {
            height: auto;
            margin-bottom: 6.3rem;
        }

        .main_text {
            margin: auto;
            font-size: 2rem;
            width: auto;
            top: auto;
            margin-top: 4.7rem;
            /* margin-left: 1.8rem; */
            /* margin-right: 1.8rem; */
            position: initial;
        }

        .first_container {
            height: auto;
            display: flex;
            flex-direction: column;
            margin-bottom: 8.3rem;
        }

        .wwd_heading {
            display: flex;
            margin-bottom: 1.9rem;
            align-items: center;








            h3 {
                position: initial;
                margin-left: 1.7rem;
                font-size: 2rem;
                width: auto;
                margin-right: 0;
                line-height: 1.5;
                height: auto;
            }
        }

        .container_number {
            position: initial;
        }

        .first_container .sub_text {
            position: initial;
            margin-left: auto;
            text-align: left;
            width: auto;
            height: auto;
            margin-bottom: 2.4rem;
            order: 2;
        }

        .mini_box {
            position: relative;
            top: auto !important;
            margin: 0 !important;
            flex-shrink: 0;
            width: 11.1rem;
        }

        .first_container .content_1 .mini_box {
            margin-left: 0;
            top: auto;
            width: 11.1rem;
            height: 5.5rem;
            flex-shrink: 0;
        }

        .first_container .content_1 .detail {
            position: initial;
            margin-left: 0;
            height: auto;
            width: auto;
            line-height: 2.4rem;
        }

        .content_1 h4 {
            font-size: 1.5rem;
        }

        .content_1,
        .content_2 {
            display: flex;
            gap: 1.4rem;
            order: 2;
            margin-bottom: 1rem;
        }

        .content_3 {
            order: 2;
            margin-top: 1.5rem;
        }

        .img_content {
            position: relative;
            padding-top: 2.3rem;
            order: 1;
            margin-bottom: 3.2rem;
        }

    }

    .otomo_what_we_do .first_container .container_number {
        margin-left: 0;
    }

    .otomo_what_we_do .first_container .content_2 .mini_box {
        top: auto;
        margin-left: 0;
        width: 11.1rem;
        flex-shrink: 0;
    }

    .otomo_what_we_do .first_container .content_2 .detail {
        position: initial;
        margin-left: 0;
        height: auto;
        width: auto;
    }

    .otomo_what_we_do .first_container .content_3 h4 {
        margin-left: 0;
        position: initial;
        height: auto;
        border-bottom: 0.1rem solid;
        width: auto;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .otomo_what_we_do .first_container .content_3 .detail {
        position: initial;
        width: auto;
        margin-left: 0;
        height: auto;
    }

    .otomo_what_we_do .first_container .border {
        display: none;
    }

    .otomo_what_we_do .content_2 h4 {
        font-size: 1.5rem;
    }


    .otomo_what_we_do .first_container .big_box {
        position: initial;
        width: 29.3rem;
        height: 26.5rem;
        margin-left: auto;
        margin-right: 0;
    }

    .otomo_what_we_do .first_container .graph_img img {
        width: 24.3rem;
        left: 0;
        top: 0;
        margin: 0;
    }

    .otomo_what_we_do .first_container .character_img{
        width: 9.7rem;
        right: 0;
        margin: 0;
        top: 11rem;
    }

    .otomo_what_we_do .first_container .character_img .wwd_shadow{
        left: 4rem;
        width: 2.4rem;
        bottom: -1.5rem;
    }

    .otomo_what_we_do .first_container .human_img {
        top: 16rem;
        width: 14.3rem;
        margin: 0;
        right: 6rem;
        height: 11.6rem;
    }

    .otomo_what_we_do .second_container {
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 8.3rem;
    }

    .otomo_what_we_do .second_container .container_number {
        margin: 0;
    }

    .otomo_what_we_do .second_container .sub_text {
        position: initial;
        width: auto;
        margin: 0;
        height: auto;
        order: 2;
        margin-bottom: 3rem;
    }

    .otomo_what_we_do .second_container .content_1 .mini_box {
        /* position: initial; */
        margin: 0;
    }

    .otomo_what_we_do .second_container .content_1 .detail {
        position: initial;
        margin: 0;
        width: auto;
        line-height: 2.4rem;
    }

    .otomo_what_we_do .second_container .content_2 .detail {
        position: initial;
        margin: 0;
        width: auto;
        line-height: 2.4rem;
    }

    .otomo_what_we_do .second_container .content_3 h4 {
        position: initial;
        width: auto;
        margin: 0;
        border-bottom: 0.1rem solid;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        height: auto;
    }

    .otomo_what_we_do .second_container .border {
        /* position: initial; */
        /* margin: 0; */
        display: none;
    }

    .otomo_what_we_do .second_container .content_3 .detail {
        position: initial;
        width: 100%;
        margin: 0;
        height: auto;
    }

    .otomo_what_we_do .second_container .big_box {
        position: initial;
        width: 28rem;
        height: 25.4rem;
        margin-left: auto;
        margin-right: 0;
        margin-top: 3rem;
    }

    .otomo_what_we_do .second_container .graph_img img {
        margin: 0;
        width: 26rem;
        top: 0;
    }

    .otomo_what_we_do .second_container .human_img {
        width: 10.7rem;
        margin: 0;
        right: 1.8rem;
        bottom: 3rem;
        top: auto;
        height: 11rem;
    }

    .otomo_what_we_do .second_container .character_img{
        width: 8rem;
        margin: 0;
        height: auto;
        top: 20rem;
        left: 10rem;
    }

    .otomo_what_we_do .second_container .character_img .wwd_shadow{
        left: 2.4rem;
        width: 2.4rem;
    }

    .otomo_what_we_do .third_container {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .otomo_what_we_do .third_container .container_number {
        margin: 0;
    }

    .otomo_what_we_do .third_container .sub_text {
        position: initial;
        margin: 0;
        width: auto;
        height: auto;
        order: 2;
    }

    .otomo_what_we_do .third_container h4 {
        position: initial;
        width: auto;
        margin: 0;
        margin-bottom: 1rem;
        height: auto;
        padding-bottom: 0.5rem;
        border-bottom: 0.1rem solid;
    }

    .otomo_what_we_do .third_container .detail {
        position: initial;
        height: auto;
        width: auto;
        margin: 0;
    }

    .otomo_what_we_do .third_container .big_box {
        position: initial;
        width: 28rem;
        height: 25.4rem;
        margin-left: auto;
        margin-right: 0;
        margin-top: 2rem;
    }

    .otomo_what_we_do .third_container .graph_img img {
        width: 26.1rem;
        margin: 0;
        height: auto;
        top: 0;
    }

    .otomo_what_we_do .third_container .human_img {
        width: 18.7rem;
        left: 4rem;
        top: 18rem;
        margin: 0;
        height: 11.4rem;
    }

    .otomo_what_we_do .third_container .character_img{
        margin: 0;
        width: 13.5rem;
        height: auto;
        right: 0;
        top: 14rem;
    }

    .otomo_what_we_do .third_container .character_img .wwd_character{
        width: 100%;
    }

    .otomo_what_we_do .third_container .character_img .wwd_shadow{
        width :4rem;
        width: 8rem;
        left: 3rem;
    }

    .otomo_what_we_do .third_container .border {
        display: none;
    }

    .otomo_changes {
        padding: 5.2rem 1.2rem 0;
        height: auto;
    }

    .otomo_changes .main_title_en {
        width: 21rem;
        position: initial;
        margin: 0;
        height: 3.6rem;
        margin-left: -1.2rem;
    }

    .otomo_changes .main_title_jp {
        top: auto;
        width: 25.4rem;
        margin: 0;
        bottom: -1.2rem;
    }

    .otomo_changes .main_container {
        height: auto;
        padding: 0 1.3rem;
    }

    .otomo_changes .main_heading {
        position: initial;
        width: 100%;
        margin: 0;
        font-size: 2rem;
        line-height: calc(35 / 20);
        height: auto;
        margin: 4.5rem auto;
    }

    .otomo_changes .first_container {
        height: auto;
    }

    .otomo_changes .first_container .container_box {
        width: auto;
        margin: 0;
        flex-direction: column;
        top: -3rem;
        border-radius: 4rem;
        padding: 5.4rem 2.5rem;
        height: auto;
    }

    .otomo_changes .first_container .sub_heading {
        position: initial;
        width: auto;
        margin: 0;
        font-size: 2.2rem;
        margin-bottom: 3rem;
        margin: 0 auto 3rem;
    }

    .otomo_changes .first_container .title_box {
        margin: 0;
        width: 28.8rem;
        text-align: center;
        height: 6rem;
        padding: 0.5rem;
        margin: auto;
    }

    .otomo_changes .first_container .before_content h4 {
        margin: auto;
        position: initial;
        margin-bottom: 1rem;
    }

    .otomo_changes .first_container .before_content {
        width: 100%;
        top: 0;
        margin-bottom: 8rem;
    }

    .otomo_changes .first_container .before_content .content_box {
        width: auto;
        margin: 0;
        padding: 3rem;
        height: auto;
    }

    .otomo_changes .first_container .before_content .text {
        width: auto;
        position: initial;
        margin: 0;
        height: auto;
    }

    .otomo_changes .first_container .sub_title_jp {
        font-size: 2.1rem;
        position: initial;
        transform: initial;
        height: auto;
        width: auto;
    }

    .otomo_changes .first_container .sub_title_en {
        font-size: 1rem;
        position: initial;
        height: auto;
        transform: initial;
        text-align: center;
        width: auto;
    }

    .otomo_changes .first_container .before_content .human_img {
        width: 16.2rem;
        margin: 0;
        height: 10.4rem;
        position: initial;
        margin-top: 2.5rem;
        margin: 2.5rem auto 0;
    }

    .otomo_changes .first_container .after_content h4 {
        margin: auto;
        position: initial;
        margin-bottom: 1.8rem;
    }

    .otomo_changes .first_container .after_content {
        width: 100%;
        top: auto;
    }

    .otomo_changes .first_container .after_content .content_box {
        margin: 0;
        width: 100%;
        height: auto;
        padding: 4rem 1rem;
    }

    .otomo_changes .first_container .after_content .text {
        height: auto;
        position: initial;
        width: auto;
        font-size: 1.6rem;
        margin: 0;
    }

    .otomo_changes .first_container .after_content .human_img {
        position: initial;
        width: 25rem;
        margin: 3rem auto 0;
    }

    .otomo_changes .first_container .triangle {
        top: 54rem;
        left: 15rem;
        border-right: 2.6rem solid transparent;
        border-top: 2.6rem solid transparent;
        border-bottom: 2.6rem solid #FF8B00;
        /* transform: translateX(-50%); */
        border-left: 2.6rem solid transparent;
    }

    .otomo_changes .second_container .container_box {
        width: auto;
        margin: 0;
        height: auto;
        flex-direction: column;
        top: -3rem;
        border-radius: 4rem;
        padding: 5.4rem 2.5rem;
        height: auto;
    }

    .otomo_changes .second_container .before_content .content_box {
        width: auto;
        margin: 0;
        height: auto;
        padding: 3.6rem 2.9rem;
    }

    .otomo_changes .second_container .title_box {
        margin: 0;
        width: 28.8rem;
        text-align: center;
        height: 6rem;
        padding: 0.5rem;
        margin: auto;
    }

    .otomo_changes .second_container .sub_title_jp {
        font-size: 2.1rem;
        position: initial;
        transform: initial;
        height: auto;
        width: auto;
    }

    .otomo_changes .second_container .sub_title_en {
        font-size: 1rem;
        position: initial;
        height: auto;
        transform: initial;
        text-align: center;
        width: auto;
    }

    .otomo_changes .second_container .sub_heading {
        width: auto;
        position: initial;
        height: auto;
        font-size: 2.2rem;
        margin: 0 auto 2rem;
    }

    .otomo_changes .second_container .before_content {
        top: auto;
        width: auto;
        height: auto;
        margin-bottom: 9.6rem;
    }

    .otomo_changes .second_container .before_content h4 {
        position: initial;
        margin: auto;
        margin: auto;
        position: initial;
        margin-bottom: 1rem;
    }

    .otomo_changes .second_container .before_content .human_img {
        width: 20.8rem;
        height: 10.4rem;
        margin: 2.4rem auto 0;
        position: initial;
        /* padding: 3.6rem 3rem; */
    }

    .otomo_changes .second_container .before_content .text {
        position: initial;
        width: auto;
        margin: 0;
        height: auto;
        margin-bottom: 2.4rem;
    }

    .otomo_changes .second_container .after_content {
        position: initial;
        margin: auto;
        margin: auto;
        position: initial;
        width: auto;
        height: auto;
    }

    .otomo_changes .second_container .after_content .content_box {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 3.6rem 2.9rem;
    }

    .otomo_changes .second_container .after_content .text {
        width: auto;
        height: auto;
        margin: 0;
        position: initial;
    }

    .otomo_changes .second_container .after_content .character_img img {
        position: initial;
        display: none;
    }

    .otomo_changes .second_container .after_content .human_img {
        position: initial;
        margin: 0;
        margin: 2.4rem auto 0;
    }

    .otomo_changes .second_container .after_content h4 {
        margin: auto;
        position: initial;
        margin-bottom: 1.8rem;
    }

    .otomo_changes .first_container .after_content .character_img img {
        display: none;
    }

    .otomo_changes .second_container .triangle {
        top: 50rem;
        left: 15rem;
        border-right: 2.8rem solid transparent;
        border-top: 2.6rem solid transparent;
        border-bottom: 2.6rem solid #3AB894;
        border-left: 2.6rem solid transparent;
    }

    .otomo_changes .sp_only{
        display: inline!important;
    }

    .case_study {
        padding: 4rem 0 8.1rem;
        height: auto;
    }

    .case_study_en {
        width: 26.4rem;
        position: initial;
        margin-left: -1.2rem;
        padding-left: 2.5rem;
    }

    .case_study_ja {
        width: 23.6rem;
        top: auto;
        width: 25.4rem;
        margin: 0;
        bottom: -0.7rem;
        height: auto;
        left: 0;
        padding-left: 2.5rem;
    }

    .square {
        width: 33rem;
        /* position: initial; */
        height: 6.3rem;
        position: relative;
        top: auto;
        margin-top: 6.5rem;
        /* padding: 0 2.5rem; */
        margin-bottom: 5.8rem;
    }

    .case_topics {
        /* left: 0; */
        top: 0.8rem;
        width: auto;
        /* position: initial; */
        /* transform: initial; */
        font-size: 1.8rem;
        white-space: nowrap;
    }

    .case_flow {
        position: initial;
        height: auto;
        transform: initial;
        gap: 0;
        width: 100%;
    }

    .square2 {
        width: 100%;
        top: auto;
        border-radius: 0 !important;
        padding: 4.9rem 1.3rem 2.5rem;
        height: auto;
    }

    .category_not {
        flex-shrink: 0;
        width: 50%;
        position: relative;
    }

    .otomo_logo {
        /* position: initial; */
        width: 10.6rem;
        top: 0;
        left: 3.2rem;
        top: 2.5rem;
    }

    .case_list {
        position: initial;
    }

    .not {
        position: initial;
        font-size: 1.4rem;
    }

    .square3 {
        position: initial;
        width: 100%;
        border-radius: 1.5rem;
        height: 9.1rem;
        /* padding: 1.3rem 0.8rem 2rem; */
        line-height: 1.5;
        margin-top: 2.2rem;
    }

    .hear {
        position: initial;
        width: auto;
        height: auto;
        font-size: 1.3rem;
        line-height: 1.5;
        padding: 1.3rem 0.8rem 2rem;
        line-height: 1.5;

        .orange {
            font-size: 1.3rem;
        }
    }

    .square4 {
        position: initial;
        width: 100%;
        border-radius: 1.5rem;
        padding: 6rem 0.6rem 7.3rem;
        height: auto;
        height: 41.2rem;
        margin-top: 4.2rem;
    }

    .case_detail {
        position: initial;
        width: 100%;
        height: auto;
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .think {
        position: initial;
        width: 10.9rem;
        height: auto;
        margin: 4.6rem auto 0;
    }

    .square5 {
        position: initial;
        width: 100%;
        border-radius: 1.5rem;
        padding: 3rem 0.3rem;
        height: 14.7rem;
        margin-top: 4.7rem;
    }

    .week {
        position: initial;
        width: 100%;
        height: auto;
        font-size: 1.3rem;
        line-height: 1.5;
        margin: auto;
        
    

        .orange {
            font-size: 1.3rem;
            line-height: 1.5;
        }
    }

    .case_study .category_not .square6 {
        position: relative;
        width: auto;
        padding: 2rem 0.5rem;
        bottom: auto;
        border-radius: 2rem;
    }

    .case_study .category_not .square6 p {
        position: initial;
        font-size: 1.3rem;
        width: auto;
        line-height: calc(20 /13);
        height: auto;
        margin: 0;
    }

    .case_study .x {
        margin-left: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
    }

    .square3_2 {
        position: initial;
        width: 100%;
        height: 9.1rem;
        border-radius: 1.5rem;
        margin-top: 2.2rem;
    }

    .square4_2 {
        position: initial;
        width: 100%;
        height: 41.2rem;
        border-radius: 1.5rem;
        margin-top: 4.2rem;
        padding: 2.3rem 0.7rem;
    }

    .square5_2 {
        position: initial;
        width: 100%;
        border-radius: 1.5rem;
        padding: 3rem 0.3rem;
        height: 14.7rem;
        margin-top: 4.7rem;
    }

    .conjunction2 {
        /* position: initial; */
        width: auto;
        font-size: 1.4rem;
        left: 14.5rem;
        top: -0.1rem;
        top: 2.5rem;
    }

    .case_detail2 {
        position: initial;
        width: 100%;
        height: auto;
        font-size: 1.3rem;
        line-height: 1.5;
        position: i;
        

        .orange {
            font-size: 1.3rem;

        }
    }

    .materials {
        position: initial;
        width: 100%;
        height: auto;
    }

    .think2 {
        /* position: initial; */
        top: 51rem;
        width: 8rem;
    }

    .otomo_logo2 {
        width: 10.6rem;
        top: 2.5rem;
        left: 3.4rem;
    }

    .introduction {
        position: initial;
        font-size: 1.4rem;
        width: auto;
    }

    .conjunction {
        font-size: 1.4rem;
        left: 14.2rem;
        top: 2.5rem;
    }

    .otomo_orange {
        width: 6.4rem;
        top: 56rem;
        right: 2rem;
        left: auto;
        height: auto;
    }

    .triangle2_2 {
        left: 7.5rem;
        top: 21rem;
    }

    .triangle3_2 {
        left: 7.5rem;
        top: 67rem;
    }

    .case_study .square6 {
        width: 16.5rem;
        height: 12.3rem;
        padding: 1rem;
        font-size: 1.3rem;
        bottom: 0 !important;
        margin: 2rem 1rem;
        border-radius: 2rem;
    }

    .case_study .o {
        width: 11rem;
        top: 0;
        margin-left: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
    }

    .case_study .category_introduction .square6 p {
        font-size: 1.3rem;
        position: initial;
        width: auto;
        margin: 0;
        line-height: 1.5;
        height: auto;
        margin-top: 1rem;
        position: relative;
        top: auto;
    }

    .triangle {
        width: 0;
        border-right: 1.7rem solid transparent;
        border-left: 1.7rem solid transparent;
        border-bottom: 1.8rem solid #6E6E6E;
        left: 8rem;
        top: -3.7rem;
    }

    .triangle2 {
        left: 3rem;
        top: 3rem;
        left: 7.5rem;
        top: 21rem;
        /* border-right: 1.3rem solid transparent; */
        /* border-left: 1.3rem solid transparent; */
        /* border-bottom: 1.4rem solid #6E6E6E; */
        /* background: no-repeat; */
    }

    .triangle3 {
        left: 7.5rem;
        top: 67rem;
    }

    .case_study .suggest {
        background-image: url('../img/cta_copy_sp.svg');
        width: 32rem;
        height: 7rem;
        position: initial;
        transform: initial;
        margin: auto;
    }

    .consult_container {
        padding-top: 6.4rem;
        position: relative;
    }

    .case_study .character_orange {
        width: 16rem;
        bottom: 0;
        margin: 0;
        top: 18rem;
        left: 1.5rem;
    }

    .case_study .character_green{
        width: 15.3rem;
        bottom: 0;
        right: 2.7rem;
        top: 17rem;
        left: auto;
        margin: 0;
    }

    .case_study .btn {
        position: relative;
        transform: initial;
        color: #fff;
        font-size: 2.2rem;
        left: auto;
        bottom: auto;
        margin-top: 27rem;
        width: 33.3rem;
        margin-left: auto;
        margin-right: auto;
    }

    .flow {
        padding: 2.5rem 2.5rem 7.6rem;
        height: auto;
    }

    .flow_en {
        width: 11.2rem;
        position: initial;
        height: 4.6rem;
        margin-left: -1.2rem;
    }

    .flow_ja {
        /* position: initial; */
        width: 19.2rem;
        bottom: -0.7rem;
        left: 0;
        top: auto;
    }

    .item_flow {
        flex-direction: column;
        gap: 4rem;
        margin-top: 5rem;
    }

    .circle {
        width: 10rem;
        height: 10rem;
        flex-shrink: 0;
    }

    .icon {
        width: 4.5rem;
        height: auto;
        margin: 0;
    }

    .flow_text {
        position: initial;
        transform: initial;
        text-align: left;
    }


    .item_containar {
        display: flex;
        gap: 1.9rem;
        width: 100%;
        margin-right: 0;
        align-items: center;
    }

    .flow_title {
        position: initial;
        transform: initial;
        font-size: 1.8rem;
        text-align: left;
    }

    .number {
        width: 3.2rem;
        left: 5rem;
    }

    .item_containar:nth-of-type(1) .icon {
        width: 4.9rem;
    }

    .item_containar:nth-of-type(2) .icon {
        width: 4.5rem;
    }

    .item_containar:nth-of-type(3) .icon {
        width: 4rem;
    }

    .item_containar:nth-of-type(4) .icon {
        width: 4.7rem;
    }

    .fandq {
        padding: 5.2rem 1.7rem 5.8rem;
        height: auto;
    }

    .fandq_logo {
        width: 8.8rem;
        position: initial;
        height: 4.1rem;
        margin: 0;
        margin-left: -1.2rem;
    }

    .fandq_title {
        top: auto;
        width: 25.6rem;
        margin: 0;
        height: 2rem;
        bottom: -0.7rem;
    }

    .fandq_heading {
        height: auto;
    }

    .question_square {
        margin: 0;
        width: 34rem;
        border-radius: 2rem;
        height: auto;
        padding: 2rem 9.8rem 2rem 6.2rem;
        margin-bottom: 2.7rem;
        /* height: 8rem; */
    }

    .fandq .answer {
        padding-left: 6.2rem;
        font-size: 1.4rem;
        /* padding-top: 2.4rem; */
        /* padding-bottom: 5rem; */
        margin-left: 0;
    }

    .question_square p {
        font-size: 1.5rem;
        margin-left: 6.2rem;
        position: initial;
        width: 22.5rem;
        margin-left: auto;
    }

    .fandq .q {
        margin-left: 0;
        top: 50%;
        /* position: initial; */
        left: 2.9rem;
        width: auto;
        /* top: 2.1rem; */
        line-height: 1;
        height: auto;
        transform: translateY(-50%);
    }

    .fandq_border {
        position: absolute;
        margin: 0;
        right: 2.3rem;
        top: 50%;
        /* transform: translateY(50%); */
    }

    .fandq .a {
        width: auto;
        margin: 0;
        left: 2.9rem;
        /* top: 3.3rem; */
    }

    .contact{
        padding-bottom: 7rem;
    }

    .form_wrap{
        width: 100%;
        padding: 0 1.7rem;


        .form_row{
            flex-direction: column;
            gap: 1rem;
        }


        .confirm_btn,.submit_btn, .back_btn{
            font-size: 2.2rem;
            /* padding: 2rem 10.7rem; */
            padding: 2rem 0;
            width: 100%;
        }

    }

    .contact_title{
        font-size: 2rem;
    }



    footer {
        height: auto;
        padding: 5.8rem 2.1rem 4rem;
    }

    .box .letter {
        position: initial;
        width: 23rem;
        height: auto;
        margin-bottom: 4.3rem;
        margin-left: auto;
        margin-right: auto;
    }

    .subtitle {
        position: initial;
        width: 23.8rem;
        height: auto;
        margin: 0 auto 3.6rem;
    }

    .consultation {
        position: initial;
        padding: 2rem 0;
        transform: initial;
        font-size: 2.2rem;
        width: revert-layer;
        margin: auto;
        text-decoration: none;
        display: block;
        text-align: center;
        line-height: 1;
        margin-bottom: 4.8rem;
    }

    .copyright {
        position: initial;
        text-align: center;
        width: 100%;
        transform: initial;
        width: 26.2rem;
        display: block;
        margin: auto;
    }

    .footer_character{
        left: auto;
        width: 28.9rem;
        right: auto;
        margin: auto;
        top: auto;
        bottom: auto;
        margin-bottom: 4.2rem;
        position: relative;

        .character_shadow{
            width: 16.5rem;
            left: 6.3rem;
            bottom: -1rem;
        }
    }

}