@charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /* *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } */ /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @-webkit-keyframes bounce { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 60% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounce { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 60% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounce-left { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 60% { opacity: 1; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounce-left { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 60% { opacity: 1; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounce-right { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); } 60% { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounce-right { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); } 60% { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } body { font-family: "Noto Sans JP", "Montserrat", sans-serif; } @media screen and (max-width: 780px) { .main { margin-top: 17.949vw; } } a { text-decoration: none; } img { max-width: 100%; height: auto; } p { margin: 0; } .br768on { display: none; } @media screen and (max-width: 780px) { .br768on { display: block; } } .br768off { display: block; } @media screen and (max-width: 780px) { .br768off { display: none; } } .br850on { display: none; } @media screen and (max-width: 850px) { .br850on { display: block; } } .br990on { display: none; } @media screen and (max-width: 990px) { .br990on { display: block; } } .br1100off { display: block; } @media screen and (max-width: 1100px) { .br1100off { display: none; } } .container { margin-top: 56px; } @media screen and (max-width: 780px) { .container { margin-top: 45px; } } .container--mTopNone { margin-top: 0; } .container--padding { margin-top: 0; padding-top: 63px; padding-bottom: 86px; } @media screen and (max-width: 780px) { .container--padding { padding-top: 100px; } } @media screen and (max-width: 600px) { .container--padding { padding-top: 50px; padding-bottom: 60px; } } .container--paddingWide { padding-top: 96px; padding-bottom: 100px; } @media screen and (max-width: 780px) { .container--paddingWide { padding-top: 80px; } } .container--paddingWideSecondary { padding-top: 90px; padding-bottom: 155px; overflow: hidden; } @media screen and (max-width: 780px) { .container--paddingWideSecondary { padding-top: 45px; padding-bottom: 110px; } } .container--paddingWideTertiary { padding-top: 103px; padding-bottom: 93px; overflow: hidden; } @media screen and (max-width: 780px) { .container--paddingWideTertiary { padding-top: 45px; padding-bottom: 60px; } } .container--pTopNone { padding-top: 0; } .container--pBottomSmall { padding-bottom: 45px; } @media screen and (max-width: 780px) { .container--pBottomLarge { padding-bottom: 80px; } } .contents, .contents--large, .contents--mediumMobilePadding, .contents--medium { max-width: 740px; width: 100%; margin: 0 auto; padding: 0 20px; } .contents--medium { max-width: 940px; } .contents--mediumMobilePadding { max-width: 940px; } @media screen and (max-width: 780px) { .contents--mediumMobilePadding { padding: 0 40px; } } @media screen and (max-width: 600px) { .contents--mediumMobilePadding { padding: 0 20px; } } .contents--large { max-width: 1140px; } .blockHeading { background-color: #ffe200; overflow: hidden; } .blockHeading__inner, .blockHeading__inner--paddingBLarge { position: relative; padding: 65px 0 51px; } @media screen and (max-width: 780px) { .blockHeading__inner, .blockHeading__inner--paddingBLarge { padding: 90px 0 90px; } } .blockHeading__inner--paddingBLarge { padding: 83px 0 51px; } @media screen and (max-width: 780px) { .blockHeading__inner--paddingBLarge { padding: 73px 0 101px; } } .blockHeading__heading { font-size: 32px; font-weight: 700; line-height: 0.8125; color: #000; text-align: center; position: relative; z-index: 3; } .blockHeading__subText { font-size: 28px; font-weight: 500; line-height: 0.9285714286; color: #000; font-family: "Montserrat"; text-align: center; margin-top: 28px; position: relative; z-index: 3; } .blockHeading__img, .blockHeading__img--good, .blockHeading__img--bad, .blockHeading__img--cloud, .blockHeading__img--hotel, .blockHeading__img--bird, .blockHeading__img--mount { width: 100%; position: absolute; } .blockHeading__img--mount { max-width: 433px; left: 0; bottom: -4px; } @media screen and (max-width: 990px) { .blockHeading__img--mount { max-width: 300px; } } @media screen and (max-width: 780px) { .blockHeading__img--mount { left: -50px; } } @media screen and (max-width: 600px) { .blockHeading__img--mount { max-width: 277px; left: -93px; } } .blockHeading__img--bird { max-width: 33px; left: 70px; bottom: 109px; } @media screen and (max-width: 990px) { .blockHeading__img--bird { max-width: 28px; left: 70px; bottom: 92px; } } @media screen and (max-width: 780px) { .blockHeading__img--bird { max-width: 25px; left: 21px; bottom: 90px; } } .blockHeading__img--hotel { max-width: 195px; right: 73px; bottom: -5px; } @media screen and (max-width: 990px) { .blockHeading__img--hotel { max-width: 164px; right: 50px; } } @media screen and (max-width: 780px) { .blockHeading__img--hotel { max-width: 171px; right: 10px; } } @media screen and (max-width: 600px) { .blockHeading__img--hotel { max-width: 136px; } } .blockHeading__img--cloud { max-width: 353px; top: 33px; right: 0; } @media screen and (max-width: 990px) { .blockHeading__img--cloud { max-width: 264px; top: 65px; right: 0; } } @media screen and (max-width: 780px) { .blockHeading__img--cloud { max-width: 262px; top: 100px; right: -69px; } } @media screen and (max-width: 600px) { .blockHeading__img--cloud { max-width: 253px; top: 113px; right: -186px; } } .blockHeading__img--bad { max-width: 346px; bottom: 0; left: 0; } @media screen and (max-width: 1100px) { .blockHeading__img--bad { max-width: 277px; left: 10px; } } @media screen and (max-width: 780px) { .blockHeading__img--bad { max-width: 222px; } } @media screen and (max-width: 600px) { .blockHeading__img--bad { max-width: 159px; } } .blockHeading__img--good { max-width: 346px; bottom: 0; right: 0; } @media screen and (max-width: 1100px) { .blockHeading__img--good { max-width: 277px; right: 10px; } } @media screen and (max-width: 780px) { .blockHeading__img--good { max-width: 222px; } } @media screen and (max-width: 600px) { .blockHeading__img--good { max-width: 159px; } } .borderBottomHeading { border-bottom: 1px solid #fae34c; padding-bottom: 7px; margin-top: 23px; } @media screen and (max-width: 780px) { .borderBottomHeading { margin-top: 18px; } } .borderBottomHeading:first-of-type { margin-top: 0; } .borderBottomHeading__main { font-size: 24px; line-height: 1.5; font-weight: bold; } .borderBottomHeading__sub { font-size: 15px; line-height: 2.5333333333; font-weight: 500; letter-spacing: 0.01em; } @media screen and (max-width: 780px) { .borderBottomHeading__sub { display: block; margin-top: -7px; } } .linkBox, .linkBox--gapSmall, .linkBox--paddingSmall, .linkBox--bgYellow { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 40px; background-color: #fff; padding: 70px 20px 50px; } @media screen and (max-width: 780px) { .linkBox, .linkBox--gapSmall, .linkBox--paddingSmall, .linkBox--bgYellow { gap: 30px; } } .linkBox--bgYellow { background-color: #f6f3e0; } .linkBox--paddingSmall { padding: 60px 20px 50px; } @media screen and (max-width: 780px) { .linkBox--paddingSmall { padding: 50px 20px 50px; } } .linkBox--gapSmall { gap: 7px; } .linkBox__text { font-size: 32px; font-weight: 700; line-height: 1.09375; letter-spacing: 0.025em; color: #000; text-align: center; } @media screen and (max-width: 780px) { .linkBox__text { font-size: 28px; line-height: 1.6; } } .linkBox__textSmall { font-size: 24px; font-weight: bold; line-height: 0.875; text-align: center; } @media screen and (max-width: 990px) { .linkBox__textSmall { line-height: 1.6; } } @media screen and (max-width: 780px) { .linkBox__textSmall { font-size: 16px; } } .linkBox__grid { display: -ms-grid; display: grid; -ms-grid-columns: -webkit-max-content 23px -webkit-max-content; -ms-grid-columns: max-content 23px max-content; grid-template-columns: -webkit-max-content -webkit-max-content; grid-template-columns: max-content max-content; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 23px; margin-top: 20px; } @media screen and (max-width: 780px) { .linkBox__grid { gap: 16px; } } .linkBox__gridDate { font-size: 15px; font-weight: 500; line-height: 1.4; } @media screen and (max-width: 780px) { .linkBox__gridDate { font-size: 14px; } } .linkBox__gridTel { font-size: 46px; line-height: 1; font-family: "Oswald", sans-serif; font-weight: bold; color: #000; } @media screen and (min-width: 781px) { .linkBox__gridTel { pointer-events: none; cursor: default; text-decoration: none; } } @media screen and (max-width: 780px) { .linkBox__gridTel { font-size: 32px; } } .linkBox__textSmallLight { text-align: center; font-size: 13px; line-height: 2.7; margin-top: 25px; } @media screen and (max-width: 850px) { .linkBox__textSmallLight { line-height: 1.6; } } @media screen and (max-width: 780px) { .linkBox__textSmallLight { font-size: 12px; } } .squareButton, .squareButton--widthSmall { max-width: 400px; width: 100%; margin: 0 auto; } .squareButton--widthSmall { max-width: 250px; } .squareButton__link { display: block; background-color: #f1c041; border: 3px solid #f1c041; color: #000; text-align: center; -webkit-transition: background-color 0.25s ease, color 0.25s ease; transition: background-color 0.25s ease, color 0.25s ease; } @media (min-width: 769px) { .squareButton__link:hover { background-color: #fff; color: #f1c041; text-decoration: none; } } .squareButton__text, .squareButton__text--paddingSmall, .squareButton__text--fontSmall { display: block; font-size: 32px; font-weight: 700; line-height: 1.09375; letter-spacing: 0.025em; padding: 29.5px 0; } @media screen and (max-width: 780px) { .squareButton__text, .squareButton__text--paddingSmall, .squareButton__text--fontSmall { font-size: 24px; padding: 28px 0; } } .squareButton__text--fontSmall { font-size: 21px; line-height: 1.23; letter-spacing: 0em; } .squareButton__text--paddingSmall { padding: 20.5px 0; } .text, .text--mTopNone { font-size: 16px; line-height: 2; letter-spacing: 0.1em; color: #000; margin-top: 31px; } @media screen and (max-width: 780px) { .text, .text--mTopNone { font-size: 14px; margin-top: 20px; } } .text--mTopNone { margin-top: 0; } .text--positionRight { text-align: right; } .timeline { position: relative; padding: 26.5px 0 53.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 18px; margin-top: 27px; } @media screen and (max-width: 780px) { .timeline { margin-top: 20px; } } .timeline--border::before { content: ""; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 3px; height: 100%; background-color: #f1c041; } @media screen and (max-width: 780px) { .timeline--border::before { left: 10px; -webkit-transform: unset; transform: unset; } } .timeline__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .timeline__block:nth-child(odd) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (max-width: 780px) { .timeline__block:nth-child(odd) { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .timeline__block:nth-child(odd) .timeline__content::before { content: ""; display: inline-block; border: 11px solid transparent; border-right: 11px solid #f6f3e0; position: absolute; top: 16.9px; left: -22px; } .timeline__block:nth-child(even) .timeline__content::before { content: ""; display: inline-block; border: 11px solid transparent; border-left: 11px solid #f6f3e0; position: absolute; top: 16.9px; right: -22px; } @media screen and (max-width: 780px) { .timeline__block:nth-child(even) .timeline__content::before { border-left-color: transparent; border-right: 11px solid #f6f3e0; position: absolute; right: unset; left: -22px; } } .timeline__block:nth-child(even) .timeline__contentDate { left: 120%; text-align: left; } @media screen and (max-width: 780px) { .timeline__block:nth-child(even) .timeline__contentDate { top: 0; left: 0; } } .timeline__block.js_scroll:nth-child(odd) .timeline__content { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); } .timeline__block.js_scroll:nth-child(even) .timeline__content { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); } @media screen and (max-width: 780px) { .timeline__block.js_scroll:nth-child(even) .timeline__content { -webkit-transform: translateX(30px); transform: translateX(30px); } } .timeline__block.js_scroll .timeline__round { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } .timeline__block.fadeIn:nth-child(odd) .timeline__content { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-animation: bounce-right 1s; animation: bounce-right 1s; } .timeline__block.fadeIn:nth-child(even) .timeline__content { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-animation: bounce-left 1s; animation: bounce-left 1s; } @media screen and (max-width: 780px) { .timeline__block.fadeIn:nth-child(even) .timeline__content { -webkit-animation: bounce-right 1s; animation: bounce-right 1s; } } .timeline__block.fadeIn .timeline__round { -webkit-animation: bounce 1s forwards; animation: bounce 1s forwards; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .timeline__round { width: 16.5px; height: 16.5px; border-radius: 17px; background-color: #f1c041; margin: 20px calc(5% - 8.25px) 0; } @media screen and (max-width: 780px) { .timeline__round { margin: 20px 24px 0 3.2px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .timeline__content { width: 45%; background-color: #f6f3e0; border-radius: 16px; position: relative; padding: 16px 25px; } @media screen and (max-width: 780px) { .timeline__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .timeline__contentGrid { display: -ms-grid; display: grid; -ms-grid-columns: 42.8% 7.2% 50%; grid-template-columns: 42.8% 50%; gap: 0 7.2%; } @media screen and (max-width: 600px) { .timeline__contentGrid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 16px; } } .timeline__contentImgBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .timeline__contentImg { width: 100%; } .timeline__contentText { font-size: 16px; line-height: 1.5; color: #222222; } @media screen and (max-width: 780px) { .timeline__contentText { -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } } .timeline__contentDate { position: absolute; width: 100%; top: 21.5px; left: -120%; text-align: right; font-size: 18px; line-height: 0.7222222222; letter-spacing: 0.1em; font-family: "Montserrat"; } @media screen and (max-width: 780px) { .timeline__contentDate { position: static; top: 0; left: 0; font-size: 16px; color: #777777; text-align: left; } } .btnBlock, .btnBlock--mTop { max-width: 230px; width: 100%; margin: 0 auto; } .btnBlock--mTop { margin-top: 40px; } .btnBlock__link { display: block; background: #CC7450; text-align: center; color: #fff; padding: 16px 5px; border-radius: 5px; font-weight: bold; } .btnBlock__link:hover { color: #fff; } .btnBlock__text { display: block; font-size: 18px; line-height: 1.55; } .ir { background-color: #ffffff; } .ir__stockPriceBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 36px; } @media screen and (max-width: 780px) { .ir__stockPriceBox { margin-top: 39px; } } .ir__stockPriceText { font-size: 26px; font-weight: bold; line-height: 1.08; font-family: "Montserrat", sans-serif; } .ir__stockPriceTextSmall { font-size: 15px; line-height: 1.86; font-family: "Noto Sans JP", sans-serif; } .ir__stockPriceFlex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 39px; margin-top: 34px; } @media screen and (max-width: 780px) { .ir__stockPriceFlex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 22px; } } .ir__stockPriceFlexText { font-size: 14px; line-height: 1.2; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-family: Meiryo; } .ir__stockPriceFlexImg { width: 50%; } @media screen and (max-width: 780px) { .ir__stockPriceFlexImg { width: 100%; } } .ir__post { margin-top: 18.5px; } @media screen and (max-width: 780px) { .ir__post { margin-top: 20px; } } .ir__post--mTopNone { margin-top: 0; } .ir__dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 40px; margin-top: 30px; border-bottom: 1px solid #dddddd; padding-bottom: 32px; } .ir__dl--noBorder { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 40px; margin-top: 30px; border-bottom: none; padding-bottom: 32px; } @media screen and (max-width: 780px) { .ir__dl { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 11px; padding-bottom: 20px; } } .ir__dt { max-width: 145px; width: 100%; background: #f1c041; padding: 4px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 780px) { .ir__dt { max-width: 120px; padding: 1px 0; } } .ir__dtYear { color: #fff; font-size: 15px; line-height: 1.86; } .ir__ddPostBox { margin: 0 0 0 24%; } @media screen and (max-width: 780px) { .ir__ddPostBox { margin: 0; } } .ir__dd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .ir__ddPostItem { display: -ms-grid; display: grid; -ms-grid-columns: 96px 1fr; grid-template-columns: 96px 1fr; margin-top: 3px; } @media screen and (max-width: 780px) { .ir__ddPostItem { -ms-grid-columns: 1fr; grid-template-columns: 1fr; margin-top: 0; } } .ir__ddPostItem:not(:first-of-type) { margin-top: 10px; } @media screen and (max-width: 780px) { .ir__ddPostItem:not(:first-of-type) { margin-top: 5px; } } .ir__ddPostDate { font-size: 13px; line-height: 2.15; color: #848484; } .ir__ddPostText p { font-size: 15px; line-height: 1.86; } @media screen and (max-width: 780px) { .ir__ddPostText p { line-height: 1.66; } } .ir__ddPostText p a { font-weight: bold; text-decoration: underline; color: #000; } .ir__ddPostText p a:hover { color: #000; } @media screen and (max-width: 780px) { .ir__ddPostText p a { text-decoration: none; } }