@charset "UTF-8";
/* variable
-------------------------------------------------------------------------------------------------------------------- */
/* mixin
-------------------------------------------------------------------------------------------------------------------- */
/* function
-------------------------------------------------------------------------------------------------------------------- */
/* HTML
テキスト
*/
/* HTML
テキスト
*/
/* Page Title
-------------------------------------------------------------------------------------------------------------------- */
#pageTitle {
position: relative;
z-index: 1;
margin: 0;
margin-top: 141px; }
#pageTitleDeco {
position: absolute;
pointer-events: none;
z-index: 0;
width: 1100px;
left: 50%;
transform: translateX(-50%); }
#pageTitleDeco > span {
position: absolute;
display: block;
opacity: 0; }
#pageTitleDeco > span:nth-child(1) {
top: -115px;
left: 190px; }
#pageTitleDeco > span:nth-child(2) {
top: -694px;
left: -877px; }
#pageTitleDeco > span:nth-child(2) img {
transform: rotate(204deg); }
#pageTitleDeco > span:nth-child(3) {
top: -751px;
right: -1098px; }
#pageTitleDeco > span:nth-child(3) img {
transform: rotate(-71deg); }
#pageTitle .Light {
top: -200px;
left: 50%;
position: absolute;
pointer-events: none;
width: 1920px;
height: 2028px;
mix-blend-mode: color-dodge;
transform: translateX(-50%); }
#pageTitle .Light > span {
position: absolute;
display: block;
background-image: url("../img/decoLine_mv01.png");
background-size: contain;
width: 100%;
height: 100%;
mix-blend-mode: color-dodge; }
@media (min-width: 751px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 751px) and (min-resolution: 2dppx) {
#pageTitle .Light > span {
background-image: url("../img/decoLine_mv01@2x.png"); } }
#pageTitle > .container {
height: 400px;
margin: 0 auto;
padding: 0 55px;
display: flex;
align-items: center;
position: relative; }
#pageTitle > .container > .txt {
display: flex;
flex-direction: column;
font-weight: normal;
width: 1100px;
margin: 0 auto;
line-height: 1.5334;
position: relative;
z-index: 1;
margin-top: 30px; }
#pageTitle > .container > .txt > .en {
flex: 0 0 auto;
font-size: 6.25rem;
display: block;
z-index: -1;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
line-height: 1;
pointer-events: none;
white-space: nowrap;
text-transform: lowercase;
margin-bottom: 20px;
opacity: 0; }
#pageTitle > .container > .txt > .en > span {
display: inline-block;
color: #000; }
#pageTitle > .container > .txt > .en > span:nth-child(1) {
text-transform: uppercase; }
#pageTitle > .container > .txt > .ja {
flex: 0 0 auto;
font-size: 1.25rem;
display: block;
z-index: -1;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.15em;
pointer-events: none;
white-space: nowrap;
margin-bottom: 20px;
color: #000;
opacity: 0; }
#pageTitle > .container > .txt .catch {
flex: 0 0 auto;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 0.875rem;
letter-spacing: 0.15em;
color: #ab916a;
opacity: 0; }
#pageTitle > .container > .mv {
position: absolute;
top: 0;
left: calc(50% - 209px);
width: 1168px;
height: 400px; }
@media (max-width: 750px) {
#pageTitle {
margin: 0; }
#pageTitleDeco {
width: 100%;
left: 0;
transform: translateX(0); }
#pageTitleDeco > span:nth-child(1) {
top: 295px;
left: 159px; }
#pageTitleDeco > span:nth-child(2) {
top: -608px;
left: -227px;
transform: rotate(88deg); }
#pageTitleDeco > span:nth-child(3) {
top: 846px;
right: auto;
left: -514px;
transform: rotate(-27deg); }
#pageTitleLight {
display: none; }
#pageTitle > .container {
flex-direction: column;
width: 100%;
height: auto;
padding: 0; }
#pageTitle > .container:before {
position: absolute;
left: 0;
top: 13px;
margin: 0;
background-image: url("../img/deco_pagetitle_sp.png");
width: 156px;
height: 305px;
transform: none;
z-index: auto; }
#pageTitle > .container:after {
display: none; }
#pageTitle > .container > .txt {
line-height: 1.25;
text-align: center;
width: 100%; }
#pageTitle > .container > .txt > .en {
font-size: 3.125rem;
margin-bottom: 10px;
font-weight: 400;
letter-spacing: 0.05em; }
#pageTitle > .container > .txt > .ja {
font-size: 1rem;
margin-bottom: 20px; }
#pageTitle > .container > .mv {
position: static;
margin-top: 20px;
padding-left: 40px;
width: 100%;
height: auto; }
#pageTitle > .container > .mv img {
width: 100%; } }
/* Breadcrumb List
-------------------------------------------------------------------------------------------------------------------- */
#breadcrumbList {
position: relative;
z-index: 1;
margin-top: 42px; }
#breadcrumbList > .container {
max-width: 1500px;
min-width: 1100px;
margin: 0 auto;
padding: 0 50px; }
#breadcrumbList > .container > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end; }
#breadcrumbList > .container > ul > li {
padding-left: 28px;
position: relative; }
#breadcrumbList > .container > ul > li:before {
content: '';
display: block;
position: absolute;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
left: 12px;
top: 11px;
background-image: url("../img/ico_bread_arrow.png");
width: 6px;
height: 10px; }
@media (max-width: 750px) {
#breadcrumbList > .container > ul > li:before {
background-image: url("../img/ico_bread_arrow_sp.png"); } }
@media (min-width: 751px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 751px) and (min-resolution: 2dppx) {
#breadcrumbList > .container > ul > li:before {
background-image: url("../img/ico_bread_arrow@2x.png"); } }
#breadcrumbList > .container > ul > li > a {
font-size: 0.875rem;
color: #222222;
font-weight: 300; }
#breadcrumbList > .container > ul > li > a:hover {
text-decoration: none; }
#breadcrumbList > .container > ul > li:first-child {
padding-left: 0px;
text-decoration: underline; }
#breadcrumbList > .container > ul > li:first-child:before {
content: none; }
#breadcrumbList > .container > ul > li:last-child > a {
color: #000;
text-decoration: none; }
@media (max-width: 750px) {
#breadcrumbList > .container {
width: 750px;
padding: 0 45px;
margin: 35px 0 0; }
#breadcrumbList > .container > ul {
justify-content: flex-start; }
#breadcrumbList > .container > ul > li {
padding-left: 53px; }
#breadcrumbList > .container > ul > li:before {
left: 20px;
top: 22px;
width: 12px;
height: 19px; }
#breadcrumbList > .container > ul > li:first-child {
background: none;
padding-left: 0; } }
/* menu
-------------------------------------------------------------------------------------------------------------------- */
#menuBottomTreatment {
margin-bottom: 120px;
position: relative; }
#menuBottomTreatment > .container {
max-width: 1205px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1; }
#menuBottomTreatment > .container > .title {
line-height: 1.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
opacity: 1 !important;
margin-bottom: 65px; }
#menuBottomTreatment > .container > .title > .en {
font-size: 150px;
line-height: 1;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
color: #d5c8b4;
margin-left: 12px;
letter-spacing: 0.1em;
overflow: hidden; }
#menuBottomTreatment > .container > .title > .en span {
display: flex; }
#menuBottomTreatment > .container > .title > .ja {
font-size: 28px;
line-height: 1;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 500;
color: #222;
letter-spacing: 0.1em;
margin-left: 3px;
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%); }
#menuBottomTreatment > .container > .content .list {
display: flex;
flex-flow: row wrap;
margin: -2px 0 0 -2px; }
#menuBottomTreatment > .container > .content .list li {
width: calc(20% - 2px);
margin: 2px 0 0 2px; }
#menuBottomTreatment > .container > .content .list li a {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-decoration: none;
font-size: 18px;
line-height: 24px;
color: #ab916a;
text-align: center;
background-color: #fff;
position: relative;
transition: background-color 0.3s ease-out; }
#menuBottomTreatment > .container > .content .list li a:hover {
background-color: #ab916a; }
#menuBottomTreatment > .container > .content .list li a:hover .ico .draw_hov {
stroke: #fff; }
#menuBottomTreatment > .container > .content .list li a:hover .txt {
color: #fff; }
#menuBottomTreatment > .container > .content .list a .ico {
display: flex;
justify-content: center;
align-items: center;
min-height: 67px;
max-width: 60px;
position: absolute;
top: 77px;
left: 50%;
transform: translateX(-50%); }
#menuBottomTreatment > .container > .content .list a .ico.ico01 svg {
width: 49px;
height: 47px; }
#menuBottomTreatment > .container > .content .list a .ico.ico02 svg {
width: 57px;
height: 67px; }
#menuBottomTreatment > .container > .content .list a .ico.ico03 svg {
width: 47px;
height: 56px; }
#menuBottomTreatment > .container > .content .list a .ico.ico04 svg {
width: 60px;
height: 40px; }
#menuBottomTreatment > .container > .content .list a .ico.ico05 svg {
width: 34px;
height: 61px; }
#menuBottomTreatment > .container > .content .list a .ico.ico06 svg {
width: 58px;
height: 31px; }
#menuBottomTreatment > .container > .content .list a .ico.ico07 svg {
width: 59px;
height: 63px; }
#menuBottomTreatment > .container > .content .list a .ico.ico08 svg {
width: 54px;
height: 49px; }
#menuBottomTreatment > .container > .content .list a .ico.ico09 svg {
width: 54px;
height: 70px; }
#menuBottomTreatment > .container > .content .list a .ico.ico10 svg {
width: 54px;
height: 70px; }
#menuBottomTreatment > .container > .content .list a .txt {
display: block;
margin-top: 88px;
transition: color 0.3s ease-out; }
@media (max-width: 750px) {
#menuBottomTreatment {
position: relative; }
#menuBottomTreatment > .container {
max-width: 750px;
padding: 0 40px; }
#menuBottomTreatment > .container > .title {
margin-bottom: 34px; }
#menuBottomTreatment > .container > .title > .en {
font-size: 4.625rem; }
#menuBottomTreatment > .container > .title > .ja {
font-size: 1.25rem;
top: 45px; }
#menuBottomTreatment > .container > .content .list li {
width: calc(50% - 2px); }
#menuBottomTreatment > .container > .content .list li a {
width: 100%;
height: 334px;
font-size: 36px;
line-height: 48px; }
#menuBottomTreatment > .container > .content .list li:nth-child(1) a .txt {
margin: 169px 0 0 11px; }
#menuBottomTreatment > .container > .content .list li:nth-child(2) a .txt {
margin-top: 168px; }
#menuBottomTreatment > .container > .content .list li:nth-child(3) a .txt {
margin-top: 149px; }
#menuBottomTreatment > .container > .content .list li:nth-child(4) a .txt {
margin-top: 138px; }
#menuBottomTreatment > .container > .content .list li:nth-child(5) a .txt {
margin-top: 153px; }
#menuBottomTreatment > .container > .content .list li:nth-child(6) a .txt {
margin-top: 151px; }
#menuBottomTreatment > .container > .content .list li:nth-child(7) a .txt {
margin: 156px 0 0 -3px; }
#menuBottomTreatment > .container > .content .list li:nth-child(8) a .txt {
margin-top: 157px; }
#menuBottomTreatment > .container > .content .list li:nth-child(9) a .txt {
margin-top: 160px; }
#menuBottomTreatment > .container > .content .list li:nth-child(10) a .txt {
margin-top: 160px; }
#menuBottomTreatment > .container > .content .list a .ico {
min-height: 134px;
max-width: 118px;
position: absolute; }
#menuBottomTreatment > .container > .content .list a .ico.ico01 {
top: 47px;
margin-left: 7px; }
#menuBottomTreatment > .container > .content .list a .ico.ico01 svg {
width: 98px;
height: 93px; }
#menuBottomTreatment > .container > .content .list a .ico.ico02 {
top: 56px; }
#menuBottomTreatment > .container > .content .list a .ico.ico02 svg {
width: 113px;
height: 134px; }
#menuBottomTreatment > .container > .content .list a .ico.ico03 {
top: 52px; }
#menuBottomTreatment > .container > .content .list a .ico.ico03 svg {
width: 93px;
height: 111px; }
#menuBottomTreatment > .container > .content .list a .ico.ico04 {
top: 31px; }
#menuBottomTreatment > .container > .content .list a .ico.ico04 svg {
width: 120px;
height: 80px; }
#menuBottomTreatment > .container > .content .list a .ico.ico05 {
top: 54px;
margin-left: 3px; }
#menuBottomTreatment > .container > .content .list a .ico.ico05 svg {
width: 67px;
height: 121px; }
#menuBottomTreatment > .container > .content .list a .ico.ico06 {
top: 39px;
margin-left: 3px; }
#menuBottomTreatment > .container > .content .list a .ico.ico06 svg {
width: 116px;
height: 61px; }
#menuBottomTreatment > .container > .content .list a .ico.ico07 {
top: 54px;
margin-left: -1px; }
#menuBottomTreatment > .container > .content .list a .ico.ico07 svg {
width: 118px;
height: 125px; }
#menuBottomTreatment > .container > .content .list a .ico.ico08 {
top: 48px; }
#menuBottomTreatment > .container > .content .list a .ico.ico08 svg {
width: 107px;
height: 98px; }
#menuBottomTreatment > .container > .content .list a .ico.ico09 {
top: 48px; }
#menuBottomTreatment > .container > .content .list a .ico.ico09 svg {
width: 107px;
height: 98px; }
#menuBottomTreatment > .container > .content .list a .ico.ico10 {
top: 48px; }
#menuBottomTreatment > .container > .content .list a .ico.ico10 svg {
width: 107px;
height: 98px; } }
/* Main
-------------------------------------------------------------------------------------------------------------------- */
#contents {
position: relative;
z-index: 1;
transform: translate3d(0, 0, 0);
font-weight: 300; }
#mainContents {
margin: 151px 0 123px; }
#mainContents:after,
#mainContents > p:after {
content: '';
display: block;
clear: both; }
#mainContents > *:first-child {
margin-top: 0; }
#mainContents > *:last-child {
margin-bottom: 0; }
@media (max-width: 750px) {
#mainContents {
margin: 59px 0 90px; } }
/* box
-------------------------------------------------------------------------------------------------------------------- */
#mainContents > section:first-child > *:first-child {
margin-top: 0; }
#mainContents > section:last-child > *:last-child {
margin-bottom: 0; }
.ui_box01 {
max-width: 1100px;
margin: 0 auto 120px;
position: relative;
z-index: 3; }
.ui_box01:after,
.ui_box01 > p:after {
content: '';
display: block;
clear: both; }
.ui_box01 > *:first-child {
margin-top: 0; }
.ui_box01 > *:last-child {
margin-bottom: 0; }
.ui_box01 .layout {
margin-bottom: 60px;
overflow: hidden; }
.ui_box01 .layout:last-child {
margin-bottom: 0; }
@media (max-width: 750px) {
.ui_box01 {
max-width: 100%;
padding: 0 40px;
margin-bottom: 90px; }
.ui_box01 .layout {
margin-bottom: 90px; } }
.ui_box01.tit-only {
margin-bottom: 50px; }
.ui_box02 {
max-width: 1100px;
margin: 0 auto 120px;
position: relative;
z-index: 3;
margin-bottom: 120px;
position: relative; }
.ui_box02:after,
.ui_box02 > p:after {
content: '';
display: block;
clear: both; }
.ui_box02 > *:first-child {
margin-top: 0; }
.ui_box02 > *:last-child {
margin-bottom: 0; }
.ui_box02 .layout {
margin-bottom: 60px;
overflow: hidden; }
.ui_box02 .layout:last-child {
margin-bottom: 0; }
@media (max-width: 750px) {
.ui_box02 {
max-width: 100%;
padding: 0 40px;
margin-bottom: 90px; }
.ui_box02 .layout {
margin-bottom: 90px; } }
.ui_box02:before {
content: '';
background-color: #ab916a;
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0; }
.ui_box02 .boxIn {
position: relative;
padding: 80px;
color: #fff; }
@media (max-width: 750px) {
.ui_box02 {
display: block;
margin-bottom: 90px;
padding: 54px 40px 50px; }
.ui_box02 .boxIn {
width: 100%;
margin-top: 0;
margin-left: 0;
padding: 40px 0 0 0; } }
.ui_boxIntro {
margin: 0 auto 120px;
position: relative;
z-index: 1;
max-width: 1600px;
min-width: 1100px; }
.ui_boxIntro .boxIn {
display: flex;
flex-direction: row-reverse;
padding: 0 2.5% 0 45.625%;
min-height: clamp(378px, 34.375vw, 550px); }
.ui_boxIntro .boxIn .pic {
position: absolute;
left: -10%;
top: 0;
width: 49.375%;
pointer-events: none; }
.ui_boxIntro .boxIn .pic img {
width: 100%;
height: auto; }
.ui_boxIntro .boxIn .txt {
flex: 1 1 auto; }
.ui_boxIntro .boxIn .inner {
margin-bottom: 60px; }
@media (max-width: 750px) {
.ui_boxIntro {
max-width: none;
min-width: auto;
margin: 0 auto 90px;
position: relative; }
.ui_boxIntro .boxIn {
min-height: auto;
padding: 0 40px;
display: block; }
.ui_boxIntro .boxIn .pic {
position: relative;
left: auto;
top: auto;
width: auto;
pointer-events: auto;
margin-bottom: 41px; }
.ui_boxIntro .boxIn .pic picture {
z-index: 2;
position: relative; } }
@media (min-width: 751px) {
.ui_boxIntro:first-child {
margin-top: -40px !important; } }
.ui_column01 {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.ui_column01 > .col02,
.ui_column01 > .col03,
.ui_column01 > .col04 {
flex: 0 1 auto;
margin-top: 60px; }
@media (min-width: 751px) {
.ui_column01 .col01 {
display: flex;
align-items: center;
padding: 40px;
background-color: #fff; }
.ui_column01 .col01 > figure {
margin-right: 50px;
margin-bottom: 0; }
.ui_column01 .col01 > figure img {
width: 290px; }
.ui_column01 .col01 > .txt {
padding: 0; }
.ui_column01 .col01 > .txt > .tit {
justify-content: flex-start;
text-align: left; }
.ui_column01 .col01:nth-child(n + 2) {
margin-top: 40px; }
.ui_column01 .col01:nth-child(even) {
flex-direction: row-reverse; }
.ui_column01 .col01:nth-child(even) > figure {
margin-right: 0;
margin-left: 50px; }
.ui_column01 > .col02 {
background-color: #fff;
padding: 40px 40px 30px; } }
.ui_column01 > .col02 {
width: calc(100% / 2 - 60px * 1 / 2); }
.ui_column01 > .col02:first-child,
.ui_column01 > .col02:first-child + .col02 {
margin-top: 0; }
.ui_column01 > .col03 {
width: calc(100% / 3 - 32px * 2 / 3);
position: relative; }
.ui_column01 > .col03:first-child,
.ui_column01 > .col03:first-child + .col03,
.ui_column01 > .col03:first-child + .col03 + .col03 {
margin-top: 0; }
.ui_column01 > .col03:nth-child(2) {
-webkit-animation-delay: 160ms;
animation-delay: 160ms; }
.ui_column01 > .col03:nth-child(3) {
-webkit-animation-delay: 240ms;
animation-delay: 240ms; }
.ui_column01 > .col03:nth-child(4) {
-webkit-animation-delay: 320ms;
animation-delay: 320ms; }
.ui_column01 > .col03:nth-child(5) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms; }
.ui_column01 > .col03:nth-child(6) {
-webkit-animation-delay: 480ms;
animation-delay: 480ms; }
.ui_column01 > .col03:nth-child(7) {
-webkit-animation-delay: 560ms;
animation-delay: 560ms; }
.ui_column01 > .col03:nth-child(8) {
-webkit-animation-delay: 640ms;
animation-delay: 640ms; }
.ui_column01 > .col04 {
width: calc(100% / 4 - 40px * 3 / 4); }
.ui_column01 > .col04:first-child,
.ui_column01 > .col04:first-child + .col04,
.ui_column01 > .col04:first-child + .col04 + .col04,
.ui_column01 > .col04:first-child + .col04 + .col04 + .col04 {
margin-top: 0; }
.ui_column01 .pic {
margin-bottom: 26px; }
.ui_column01 .pic img {
width: 100%; }
.ui_column01 .txt {
padding: 0 14px; }
.ui_column01 .txt > .tit {
margin-bottom: 13px;
font-size: 1.3125rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
letter-spacing: 0.1em;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center; }
.ui_column01 .txt > .tit.line02 {
height: 55px; }
@media (max-width: 750px) {
.ui_column01 > .col01,
.ui_column01 > .col02,
.ui_column01 > .col03,
.ui_column01 > .col04 {
width: 100%; }
.ui_column01 > .col01:first-child,
.ui_column01 > .col02:first-child,
.ui_column01 > .col03:first-child,
.ui_column01 > .col04:first-child {
margin-top: 0; }
.ui_column01 > .col01:nth-child(n + 2),
.ui_column01 > .col02:nth-child(n + 2),
.ui_column01 > .col03:nth-child(n + 2),
.ui_column01 > .col04:nth-child(n + 2) {
margin-top: 66px !important; }
.ui_column01 > .sp-col02 {
width: calc(100% / 2 - 40px * 1 / 2); }
.ui_column01 > .sp-col02:nth-child(-n + 2) {
margin-top: 0 !important; }
.ui_column01 > .sp-col02:nth-child(n + 3) {
margin-top: 50px !important; }
.ui_column01 .pic {
margin-bottom: 50px; }
.ui_column01 .pic img {
width: 100%; }
.ui_column01 .txt > .tit {
height: auto !important;
margin-bottom: 26px;
font-size: 1.125rem; } }
/* content parts
-------------------------------------------------------------------------------------------------------------------- */
/*====================================
Title
=====================================*/
.ui_tit01 {
flex: 0 0 auto;
position: relative;
line-height: 1.5;
flex-direction: column;
display: flex; }
@media (min-width: 751px) {
.ui_tit01 {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: mixed; } }
@media (min-width: 1101px) and (max-width: 1500px) {
.ui_tit01 {
right: 0;
padding-top: 0; } }
.ui_tit01 > .ja {
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.75rem;
letter-spacing: 0.08em;
margin-bottom: 6px;
color: #000; }
.ui_tit01 > .en {
font-size: 1.5rem;
color: #ab916a;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
line-height: 1.5;
letter-spacing: 0.1em;
padding-top: 5px;
margin-right: 25px;
text-align: left;
text-transform: uppercase; }
@media (max-width: 750px) {
.ui_tit01 {
position: static;
margin-bottom: 45px;
margin-left: 0;
text-align: center;
padding-top: 0; }
.ui_tit01 > .ja {
margin-bottom: 16px;
font-size: 1.5rem; }
.ui_tit01 > .en {
line-height: 1.5;
font-size: 1.1875rem;
margin: 0;
text-align: center; } }
@media (min-width: 751px) {
.ui_boxIntro .ui_tit01 {
margin-left: 9.398%; }
.ui_tit01.type02 {
margin-left: 0;
margin-bottom: 60px;
justify-content: center;
text-align: center;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
overflow: hidden; }
.ui_tit01.type02 .en {
margin-right: 0;
text-align: center; } }
.ui_tit02 {
margin-bottom: 50px;
font-size: 1.5rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
color: #fff;
padding: 12px 25px 12px 52px;
background: #ab916a;
position: relative;
letter-spacing: 0.05em;
overflow: hidden; }
.ui_tit02::before {
position: absolute;
content: '';
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 20px;
height: 3px;
background: #fff; }
@media (max-width: 750px) {
.ui_tit02 {
font-size: 1.25rem;
padding: 20px 30px;
text-align: center; }
.ui_tit02::before {
content: none; } }
.turnDark .ui_tit02 {
background: #fff;
color: #ab916a; }
.turnDark .ui_tit02:before {
background: #ab916a; }
.ui_tit03 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
position: relative;
z-index: 10;
margin-bottom: 110px;
opacity: 1 !important;
overflow: hidden; }
.ui_tit03.show {
-webkit-animation: none !important;
animation: none !important; }
.ui_tit03.show > .en > span,
.ui_tit03.show > .ja > span {
transform: scale(1, 1) translate(0, 0);
will-change: transform;
opacity: 1; }
.ui_tit03 .en > span {
font-size: 4.625rem;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
color: #ab916a;
text-transform: uppercase;
display: block;
letter-spacing: 0.1em;
line-height: 1;
transform: scale(1, 3) translate(0, 150%);
transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
opacity: 0; }
.ui_tit03 .ja > span {
display: block;
margin-top: 15px;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25rem;
letter-spacing: 0.05em;
line-height: 1.5;
transform: scale(1, 3) translate(0, 150%);
transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
opacity: 0;
color: #222; }
@media (max-width: 750px) {
.ui_tit03 {
display: block;
text-align: center;
align-items: center;
margin-bottom: 90px; }
.ui_tit03 .en > span {
display: block;
font-size: 3rem;
margin-bottom: 10px;
font-weight: 400; }
.ui_tit03 .en.small > span {
font-size: 2.1875rem; }
.ui_tit03 .ja > span {
display: block;
font-size: 1.125rem;
font-weight: 500; } }
.ui_tit03.type02 .en > span {
color: #ab916a; }
.turnDark .ui_tit03 .en > span {
color: #d5c8b4; }
.turnDark .ui_tit03 .ja > span {
color: #fff; }
@media (min-width: 751px) {
.ui_box01 .ui_tit03 {
margin-bottom: 65px; } }
.ui_tit04 {
display: flex;
justify-content: flex-end;
text-align: center; }
.ui_tit04 > .wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; }
.ui_tit04 > .wrap > .ja {
font-size: 1.25rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 500;
color: #fff;
letter-spacing: 0.05em;
line-height: 1.5;
margin-bottom: 11px;
display: block;
overflow-wrap: normal; }
.ui_tit04 > .wrap > .en {
font-size: 4.625rem;
color: #d5c8b4;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.1em;
overflow-wrap: normal;
text-transform: uppercase;
line-height: 1;
margin-bottom: 20px;
display: block; }
@media (max-width: 750px) {
.ui_tit04 > .wrap {
width: 100%;
margin-bottom: 40px; }
.ui_tit04 > .wrap > .en {
display: block;
margin-bottom: 10px;
font-size: 3.125rem;
font-weight: 400; }
.ui_tit04 > .wrap > .ja {
display: block;
font-size: 1.125rem; } }
.ui_tit05 {
position: relative;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 1px solid #ab916a;
border-width: 1px 0;
font-size: 1.5rem;
text-align: center;
overflow: hidden;
padding-top: 11px;
padding-bottom: 10px;
margin-bottom: 52px;
line-height: 1.5;
letter-spacing: 0.1em;
color: #ab916a; }
@media (max-width: 750px) {
.ui_tit05 {
border-width: 2px 0;
font-size: 1.25rem;
padding-top: 23px;
padding-bottom: 23px;
margin-bottom: 70px; } }
.turnDark .ui_tit05 {
color: #fff;
border-color: #fff; }
.ui_tit06 {
display: flex;
flex-direction: column;
align-items: center;
color: #d5c8b4;
position: relative;
padding-top: 90px; }
.ui_tit06 span {
display: block; }
.ui_tit06 .ja {
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.75rem;
font-feature-settings: 'palt';
letter-spacing: 0.1em;
line-height: 1.5;
color: #fff; }
.ui_tit06 .en {
position: absolute;
top: -20px;
left: 35px;
font-size: 5rem;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-feature-settings: 'palt';
letter-spacing: 0.075em;
text-transform: uppercase;
line-height: 0.9; }
@media (max-width: 750px) {
.ui_tit06 {
display: block;
width: 100%;
text-align: center;
align-items: center;
top: 0;
left: 0;
padding-right: 0;
position: relative;
margin-bottom: 0;
padding: 4px 0 38px; }
.ui_tit06 span {
display: block; }
.ui_tit06 .ja {
font-size: 1.125rem;
font-weight: 500; }
.ui_tit06 .en {
position: static;
font-size: 3rem;
margin-bottom: 16px;
font-weight: 400; }
.ui_tit06 .en.small {
font-size: 2.5rem; } }
.ui_tit07 {
display: block;
margin-top: -85px;
width: 760px;
font-weight: normal;
margin-bottom: 48px; }
.ui_tit07 .en {
display: block;
font-size: 3.375rem;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05em;
line-height: 1;
color: #ab916a;
text-transform: uppercase;
margin-bottom: 40px; }
.ui_tit07 .ja {
display: block;
font-size: 1.5rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.1em;
line-height: 1.5;
color: #000; }
@media (max-width: 750px) {
.ui_tit07 {
width: 100%;
position: relative;
margin: -15px auto 40px;
z-index: 1; }
.ui_tit07 .ja {
font-size: 1.25rem;
font-feature-settings: 'palt';
letter-spacing: 0.1em; }
.ui_tit07 .en {
margin: 0 -40px 40px;
font-weight: 300;
font-style: normal;
font-size: 1.875rem;
letter-spacing: 0.05em; } }
.turnDark .ui_tit07 .en {
color: #d5c8b4; }
.turnDark .ui_tit07 .ja {
color: #fff; }
.ui_tit08 {
font-size: 1.5rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
letter-spacing: 0.1em;
text-align: left;
padding-left: 37px;
font-feature-settings: 'palt';
position: relative;
margin-bottom: 32px;
overflow: hidden;
color: #000; }
.ui_tit08::before {
content: '';
display: block;
position: absolute;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
width: 20px;
height: 5px;
background-color: #ab916a;
top: 50%;
transform: translateY(-50%);
left: 0; }
@media (max-width: 750px) {
.ui_tit08 {
height: auto;
font-size: 1.25rem;
padding-left: 80px;
margin-bottom: 40px; }
.ui_tit08::before {
width: 40px;
height: 10px; } }
.ui_tit09 {
margin-bottom: 37px; }
.ui_tit09 > .ja {
margin-bottom: 10px;
display: block;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.875rem;
line-height: 1.5; }
.ui_tit09 > .en {
display: block;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 1.5rem;
color: #ab916a;
line-height: 1.5;
letter-spacing: 0.04em;
text-transform: uppercase; }
@media (max-width: 750px) {
.ui_tit09 {
margin-bottom: 40px; }
.ui_tit09 > .ja {
margin-bottom: 20px;
text-align: center;
font-size: 1.25rem; }
.ui_tit09 > .en {
font-size: 1.0625rem;
text-align: center; } }
.turnDark .ui_tit09 .en {
color: #d5c8b4; }
.turnDark .ui_tit09 > .ja {
color: #fff; }
/*====================================
Img
=====================================*/
@media (max-width: 750px) {
.pic_l {
display: block;
float: none;
margin: 20px 0;
width: 100%;
height: auto; }
.pic_m {
display: block;
margin: 0 auto 50px;
width: 100%; }
.pic_m img {
width: 100%;
height: auto;
float: none; } }
/*====================================
Table
=====================================*/
.ui_table01 {
width: 100%;
border-collapse: separate; }
.ui_table01 th,
.ui_table01 td {
padding: 18px 20px;
background-color: transparent;
vertical-align: middle;
font-weight: 300;
color: #222; }
.ui_table01 caption {
font-weight: 400;
font-size: 1.25rem;
padding: 15px 40px 13px;
background: linear-gradient(90deg, #dbc09a 40%, #bb9969 100%);
color: #fff;
line-height: 1.5; }
.ui_table01 thead th {
background-color: #ab916a;
color: #fff;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25rem;
line-height: 1.5; }
.ui_table01 tbody th {
background-color: transparent;
text-align: left;
border: 1px solid #000;
border-width: 0 0 1px;
padding: 25px 44px 25px 30px;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-width: 210px; }
.ui_table01 tbody td {
border: 1px solid #000;
border-width: 0 0 1px;
padding: 25px 38px;
font-size: 1rem;
font-weight: 300;
line-height: 1.8125; }
.ui_table01.bd-top tbody tr:nth-child(1) th,
.ui_table01.bd-top tbody tr:nth-child(1) td {
border-width: 1px 0 1px; }
@media (max-width: 750px) {
.ui_table01 th,
.ui_table01 td {
padding: 26px 20px 24px;
line-height: 1.6875; }
.ui_table01 caption {
font-size: 1.25rem;
padding: 25px 18px; }
.ui_table01 tbody th {
width: 30%;
border-width: 0 0 2px;
font-size: 1rem;
text-align: center;
letter-spacing: 0px;
padding: 26px 37px; }
.ui_table01 tbody td {
border-width: 0 0 2px;
font-size: 1rem;
padding: 26px 37px;
line-height: 1.75;
font-weight: 300; }
.ui_table01 tbody tr:nth-child(1) th,
.ui_table01 tbody tr:nth-child(1) td {
border-width: 2px 0 2px; }
.ui_table01.sp-col01 th,
.ui_table01.sp-col01 td {
width: 100%;
display: block; }
.ui_table01.sp-col01 tbody tr:nth-child(1) th {
border-width: 2px 0 2px; }
.ui_table01.sp-col01 tbody tr:nth-child(1) td {
border-width: 0 0 2px; } }
.ui_table02 {
width: 100%;
border-collapse: separate;
margin: 30px 0;
position: relative; }
.ui_table02 th,
.ui_table02 td {
font-weight: normal;
padding: 15px 10px 15px 25px;
background-color: #fff;
vertical-align: middle; }
.ui_table02 thead:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 16px 0 0;
border-color: #ffffff transparent transparent transparent; }
.ui_table02 thead th,
.ui_table02 thead td {
font-size: 1.125rem;
color: #fff;
background-color: #77be3b;
text-align: center; }
.ui_table02 tbody th {
width: 210px;
background-color: #fff6a6;
text-align: left;
border: 1px solid #77be3b;
border-width: 1px 0 0; }
.ui_table02 tbody td {
border: 1px solid #77be3b;
border-width: 1px 0 0; }
.ui_table02 tbody tr:last-child th,
.ui_table02 tbody tr:last-child td {
border-width: 1px 0; }
@media (max-width: 750px) {
.ui_table02 {
margin: 30px 0; }
.ui_table02 th,
.ui_table02 td {
width: 100% !important;
padding: 25px 35px;
display: block; }
.ui_table02 tbody th,
.ui_table02 tbody td {
border-width: 2px 0 0; }
.ui_table02 tbody th {
text-align: center; }
.ui_table02 tbody tr:last-child th,
.ui_table02 tbody tr:last-child td {
border-width: 2px 0; } }
/*====================================
boxWrap
=====================================*/
.ui_boxWrap01 {
max-width: 1100px;
margin: 0 auto 120px;
position: relative;
z-index: 2; }
.ui_boxWrap01:after,
.ui_boxWrap01 > p:after {
content: '';
display: block;
clear: both; }
.ui_boxWrap01 > *:first-child {
margin-top: 0; }
.ui_boxWrap01 > *:last-child {
margin-bottom: 0; }
.ui_boxWrap01 > .bgPic {
position: absolute;
left: 50%;
min-width: 1920px;
width: 100vw;
top: -50px;
bottom: -60px;
transform: translateX(-50%);
z-index: 1; }
.ui_boxWrap01 > .boxIn {
position: relative;
width: 100%;
z-index: 9; }
.ui_boxWrap01 > .boxIn::before {
content: '';
position: absolute;
left: -360px;
width: 1610px;
height: 100%;
top: 0;
z-index: -1; }
.ui_boxWrap01 > .boxIn .lead {
margin-bottom: 85px; }
.ui_boxWrap01 > .boxIn > .boxInner {
display: flex;
align-items: center;
margin-bottom: 85px; }
.ui_boxWrap01 > .boxIn > .boxInner:last-child {
margin-bottom: 0; }
.ui_boxWrap01 > .boxIn > .boxInner > .txtIn {
margin-left: 70px; }
.ui_boxWrap01 > .boxIn .inner:nth-child(n + 2) {
margin-top: 60px; }
@media (min-width: 751px) {
.ui_boxWrap01 > .boxIn > .boxInner.reverse {
flex-direction: row-reverse; }
.ui_boxWrap01 > .boxIn > .boxInner.reverse > .txtIn {
margin-right: 70px;
margin-left: 0; }
.ui_boxWrap01 > .boxIn > .boxInner > .txtIn > .wide {
margin: 0 !important; }
.ui_boxWrap01.reverse > .bgPic {
left: auto;
right: 308px; }
.ui_boxWrap01.reverse > .bgPic figure {
right: auto;
left: 0; }
.ui_boxWrap01.reverse > .boxIn::before {
left: auto;
right: -360px; } }
@media (max-width: 750px) {
.ui_boxWrap01 {
max-width: 100%;
margin: 0 auto 90px; }
.ui_boxWrap01::before {
left: 0;
width: 100%;
height: 100%; }
.ui_boxWrap01 > .bgPic {
left: 0;
right: 0;
top: -100px;
bottom: -300px;
width: auto;
z-index: -1; }
.ui_boxWrap01 > .bgPic figure picture,
.ui_boxWrap01 > .bgPic figure img {
height: auto;
-o-object-fit: contain;
object-fit: contain; }
.ui_boxWrap01 > .boxIn {
width: 670px;
margin: 0 40px; }
.ui_boxWrap01 > .boxIn::before {
content: none; }
.ui_boxWrap01 > .boxIn > .boxInner {
display: block; }
.ui_boxWrap01 > .boxIn > .boxInner > .txtIn {
margin-left: 0; }
.ui_boxWrap01 > .boxIn > .boxInner > .pic {
margin-bottom: 40px; }
.ui_boxWrap01 > .boxIn > .boxInner > .pic img {
width: 100%;
height: auto; }
.ui_boxWrap01 > .boxIn .inner {
padding: 0 40px; }
.ui_boxWrap01 > .boxIn .inner:nth-child(n + 2) {
margin-top: 60px; } }
.turnDark .ui_boxWrap01 .boxIn .lead {
color: #fff; }
.turnDark .ui_boxWrap01 .boxIn .boxInner {
color: #fff; }
.turnDark .ui_boxWrap01 .boxIn .inner > .txt {
color: #fff; }
.ui_boxWrap02 {
max-width: 1400px;
min-width: 1100px;
margin: 0 auto 120px;
position: relative;
z-index: 1; }
.ui_boxWrap02:after,
.ui_boxWrap02 > p:after {
content: '';
display: block;
clear: both; }
.ui_boxWrap02 > *:first-child {
margin-top: 0; }
.ui_boxWrap02 > *:last-child {
margin-bottom: 0; }
.ui_boxWrap02 > .bgPic {
position: absolute;
right: calc(100% - 452px);
top: 0;
bottom: 0px;
width: calc(50vw - 50% + 452px);
min-width: 452px;
z-index: -1;
overflow: hidden;
background-color: rgba(135, 94, 31, 0.6); }
.ui_boxWrap02 > .bgPic figure {
position: absolute;
bottom: 0;
left: 0; }
.ui_boxWrap02 > .bgPic picture,
.ui_boxWrap02 > .bgPic img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover; }
.ui_boxWrap02 > .boxIn {
display: flex;
align-items: center;
position: relative;
z-index: 2;
padding: 100px 0; }
.ui_boxWrap02 > .boxIn > .ui_tit04 > .wrap {
width: 452px; }
.ui_boxWrap02 > .boxIn > .slider {
flex: 0 0 auto;
margin-left: 116px;
position: relative; }
.ui_boxWrap02 > .boxIn > .slider .splide__track {
width: 320px;
overflow: visible;
-webkit-clip-path: inset(0 -100vw 0 -30px);
clip-path: inset(0 -100vw 0 -30px); }
@media (min-width: 751px) {
.ui_boxWrap02 > .boxIn > .slider .splide__arrows {
position: absolute;
display: flex;
justify-content: flex-start;
left: -418px;
bottom: 0;
z-index: 2; }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow {
flex: 0 0 auto;
display: block;
width: 70px;
height: 70px;
line-height: 70px;
position: relative;
left: auto;
right: auto;
top: auto;
margin: 0;
background: transparent;
border: solid 1px #d5c8b4;
transition: opacity 0.3s; }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow svg {
display: none; }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow::after {
content: '';
margin: auto;
position: absolute;
top: 40%;
left: 35%;
width: 14px;
height: 14px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg); }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow:hover, .ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow[aria-disabled='true'], .ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow[disabled] {
opacity: 0.5; }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow--prev {
margin-right: 20px; }
.ui_boxWrap02 > .boxIn > .slider .splide__arrows .splide__arrow--prev::after {
transform: rotate(-135deg);
left: 34px; } }
@media (max-width: 750px) {
.ui_boxWrap02 {
max-width: none;
min-width: auto;
width: 750px;
margin: 0 auto 110px;
padding: 65px 40px 0; }
.ui_boxWrap02 > .bgPic {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
margin-left: 0;
background: #ab916a; }
.ui_boxWrap02 > .bgPic figure {
display: none;
top: 0;
bottom: auto; }
.ui_boxWrap02 > .bgPic figure picture,
.ui_boxWrap02 > .bgPic figure img {
height: auto;
-o-object-fit: contain;
object-fit: contain; }
.ui_boxWrap02 > .boxIn {
margin: 0;
width: 100%;
padding: 0 40px 40px;
flex-direction: column; }
.ui_boxWrap02 > .boxIn::before {
content: none; }
.ui_boxWrap02 > .boxIn > .slider {
width: 670px;
margin-left: 0;
background: #fff;
padding: 40px 40px 70px; }
.ui_boxWrap02 > .boxIn > .slider .splide__track {
width: auto;
padding: 0; }
.ui_boxWrap02 > .boxIn .splide__arrows {
display: none; }
.ui_boxWrap02::after {
left: 0;
width: 100%;
min-width: auto; } }
.ui_boxWrap03 {
width: 1100px;
margin: 0 auto 120px;
padding: 35px 0 0;
position: relative;
z-index: 91; }
.ui_boxWrap03:after,
.ui_boxWrap03 > p:after {
content: '';
display: block;
clear: both; }
.ui_boxWrap03 > *:first-child {
margin-top: 0; }
.ui_boxWrap03 > *:last-child {
margin-bottom: 0; }
.ui_boxWrap03 > .layout {
min-height: 415px;
display: flex;
position: relative;
flex-direction: row-reverse;
padding: 60px 0 0; }
.ui_boxWrap03 > .layout > .pic {
width: 450px;
position: relative;
top: -95px;
right: 0; }
.ui_boxWrap03 > .layout > .pic::after {
content: '';
position: absolute;
width: 600px;
height: 450px;
min-height: 450px;
top: 80px;
left: 80px;
z-index: -1;
background-color: rgba(135, 94, 31, 0.6); }
.ui_boxWrap03 > .layout > .pic > picture {
display: block; }
.ui_boxWrap03 > .layout > .txt {
width: 550px;
margin: 0 auto 0 0; }
.ui_boxWrap03.reverse > .layout {
flex-direction: row; }
.ui_boxWrap03.reverse > .layout > .pic {
left: -150px;
right: auto; }
.ui_boxWrap03.reverse > .layout > .pic::after {
left: -80px; }
.ui_boxWrap03.reverse > .layout > .txt {
width: 550px;
margin: 0 0 0 auto; }
@media (max-width: 750px) {
.ui_boxWrap03 {
width: 100%;
margin: 0 auto 90px;
padding: 0; }
.ui_boxWrap03 > .layout {
display: block;
text-align: center;
padding: 0 40px; }
.ui_boxWrap03 > .layout::after {
content: '';
position: absolute;
width: 100%;
height: calc(100% - 225px);
top: 0;
left: 80px;
z-index: -1;
background-color: rgba(135, 94, 31, 0.6); }
.ui_boxWrap03 > .layout > .pic {
margin-right: auto;
margin-left: -80px;
position: relative;
top: 80px;
right: 0; }
.ui_boxWrap03 > .layout > .pic:after {
content: none; }
.ui_boxWrap03 > .layout > .pic img {
width: 670px;
height: 500px; }
.ui_boxWrap03 > .layout > .txt {
width: 100%;
margin: -40px 0 0;
padding: 105px 40px 40px;
background: #fff; }
.ui_boxWrap03 > .layout > .txt > p {
text-align: justify; }
.ui_boxWrap03.reverse > .layout::after {
left: auto;
right: 80px; }
.ui_boxWrap03.reverse > .layout > .pic {
margin-left: 80px;
right: auto;
left: 0; }
.ui_boxWrap03.reverse > .layout > .txt {
width: 100%;
margin: -40px 0 0;
padding-top: 105px; } }
.ui_boxWrap04 {
max-width: 1400px;
min-width: 1100px;
margin: 0 auto 120px;
position: relative; }
@media (max-width: 750px) {
.ui_boxWrap04 {
max-width: none;
min-width: 100%;
margin-bottom: 90px;
padding: 0 40px; } }
/*====================================
imageList
=====================================*/
.ui_list_image01 {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.ui_list_image01 > li .pic {
margin-bottom: 48px;
text-align: center; }
.ui_list_image01 > li > .txt > .tit {
margin-bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.875rem;
line-height: 1.5;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center; }
.ui_list_image01 > li:nth-child(n + 4) {
margin-top: 40px; }
@media (min-width: 751px) {
.ui_list_image01 > li.col02 {
width: 45.5%; } }
@media (max-width: 750px) {
.ui_list_image01 {
display: block;
margin: 30px 0;
clear: both; }
.ui_list_image01 > li {
width: 100%; }
.ui_list_image01 > li:nth-child(n + 2) {
margin-top: 60px; }
.ui_list_image01 > li > .pic {
margin-bottom: 40px; }
.ui_list_image01 > li > .pic img {
width: 100%;
height: auto; }
.ui_list_image01 > li > .txt > .tit {
margin-bottom: 40px;
font-size: 1.25rem; } }
.turnDark .ui_list_image01 {
color: #fff; }
/*====================================
Step Box
=====================================*/
.ui_list_step01 {
margin-bottom: 100px;
list-style-type: none; }
.ui_list_step01:last-child {
margin-bottom: 0; }
.ui_list_step01 > li {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
flex-direction: row-reverse;
position: relative;
margin-bottom: 70px;
padding-left: 136px; }
.ui_list_step01 > li::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 140px;
width: 2px;
height: 240px;
background-color: #d5c8b4; }
.ui_list_step01 > li > .num {
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10; }
.ui_list_step01 > li > .num::after {
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 5.25rem;
color: #d5c8b4;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
letter-spacing: 0.1em;
padding-left: 5px; }
.ui_list_step01 > li > .txt {
flex: 1 1 50%;
padding-top: 30px;
padding-left: 80px;
position: relative;
color: #222; }
.ui_list_step01 > li > .txt > .tit {
display: flex;
flex-direction: column;
line-height: 1.5;
margin-bottom: 30px; }
.ui_list_step01 > li > .txt > .tit > .ja {
font-size: 1.5rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.1em; }
.ui_list_step01 > li figure {
max-width: 300px;
width: 50%;
margin-left: 68px;
position: relative; }
.ui_list_step01 > li figure picture {
display: block;
overflow: hidden; }
.ui_list_step01 > li figure picture img {
transition: all 0.8s cubic-bezier(0.32, 0.94, 0.6, 1); }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ui_list_step01 > li figure picture img {
z-index: -1; } }
.ui_list_step01 > li:nth-child(1) > .num:after {
content: "01"; }
.ui_list_step01 > li:nth-child(2) > .num:after {
content: "02"; }
.ui_list_step01 > li:nth-child(3) > .num:after {
content: "03"; }
.ui_list_step01 > li:nth-child(4) > .num:after {
content: "04"; }
.ui_list_step01 > li:nth-child(5) > .num:after {
content: "05"; }
.ui_list_step01 > li:nth-child(6) > .num:after {
content: "06"; }
.ui_list_step01 > li:nth-child(7) > .num:after {
content: "07"; }
.ui_list_step01 > li:nth-child(8) > .num:after {
content: "08"; }
.ui_list_step01 > li:nth-child(9) > .num:after {
content: "09"; }
.ui_list_step01 > li:nth-child(10) > .num:after {
content: "10"; }
.ui_list_step01 > li:nth-child(11) > .num:after {
content: "11"; }
.ui_list_step01 > li:nth-child(12) > .num:after {
content: "12"; }
.ui_list_step01 > li:nth-child(13) > .num:after {
content: "13"; }
.ui_list_step01 > li:nth-child(14) > .num:after {
content: "14"; }
.ui_list_step01 > li:nth-child(15) > .num:after {
content: "15"; }
.ui_list_step01 > li:nth-child(16) > .num:after {
content: "16"; }
.ui_list_step01 > li:nth-child(17) > .num:after {
content: "17"; }
.ui_list_step01 > li:nth-child(18) > .num:after {
content: "18"; }
.ui_list_step01 > li:nth-child(19) > .num:after {
content: "19"; }
.ui_list_step01 > li:nth-child(20) > .num:after {
content: "20"; }
.ui_list_step01 > li:last-child {
margin-bottom: 0; }
.ui_list_step01.no-line > li:before {
content: none; }
@media (max-width: 750px) {
.ui_list_step01 > li {
width: 100%;
flex-direction: column;
align-items: stretch;
margin-bottom: 100px;
padding: 0 0 0 125px; }
.ui_list_step01 > li:before {
left: 80px;
height: 100%; }
.ui_list_step01 > li > .num {
width: 95px;
height: 95px;
left: -44px; }
.ui_list_step01 > li > .num::after {
font-size: 2.5rem;
width: 95px;
height: 95px;
line-height: 1;
font-weight: 400; }
.ui_list_step01 > li > .txt {
flex: 0 0 100% !important;
margin: 0;
padding-top: 0;
padding-left: 0;
min-height: auto; }
.ui_list_step01 > li > .txt > .tit {
margin-bottom: 25px;
align-items: flex-start; }
.ui_list_step01 > li > .txt > .tit > .ja {
font-size: 1.25rem;
font-feature-settings: 'palt';
letter-spacing: 0.05em; }
.ui_list_step01 > li figure {
width: 100%;
max-width: none;
margin-left: 0;
margin-bottom: 40px;
padding-top: 0; }
.ui_list_step01 > li figure img {
width: 100%;
height: auto; }
.ui_list_step01 > li:last-child {
margin-bottom: 0; }
.ui_list_step01 > li:hover picture img {
transform: scale(1); }
.ui_list_step01.no-line > li {
padding-left: 0; }
.ui_list_step01.no-line > li .num {
left: -20px; }
.ui_list_step01.no-line > li > .txt > .tit {
align-items: center;
text-align: center; } }
.turnDark .ui_list_step01 > li > .txt {
color: #fff; }
.ui_list_step02 > li {
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: 300px;
margin-right: 53px;
position: relative; }
.ui_list_step02 > li.show > figure > .num::after {
transform: scale(1, 1) translate(0, 0);
will-change: transform; }
.ui_list_step02 > li:last-child {
margin-right: 0; }
.ui_list_step02 > li > figure {
position: relative;
margin-bottom: 23px;
width: 300px; }
.ui_list_step02 > li > figure > .num {
position: absolute;
bottom: -22px;
left: -30px;
z-index: 9;
line-height: 1;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-weight: 400;
font-size: 3.125rem;
letter-spacing: 0.05em; }
.ui_list_step02 > li > figure > .num::after {
background: #ab916a;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: block; }
.ui_list_step02 > li > figure picture {
display: block;
overflow: hidden; }
.ui_list_step02 > li > figure picture img {
transition: all 0.8s cubic-bezier(0.32, 0.94, 0.6, 1); }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.ui_list_step02 > li > figure picture img {
z-index: -1; } }
.ui_list_step02 > li > .tit {
display: flex;
flex-direction: column;
margin-bottom: 16px;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25rem;
letter-spacing: 0.1em;
line-height: 1.5;
justify-content: center;
text-align: center; }
.ui_list_step02 > li > .tit.line02 {
height: 60px; }
.ui_list_step02 > li:nth-child(1) figure .num:after {
content: "01"; }
.ui_list_step02 > li:nth-child(2) figure .num:after {
content: "02"; }
.ui_list_step02 > li:nth-child(3) figure .num:after {
content: "03"; }
.ui_list_step02 > li:nth-child(4) figure .num:after {
content: "04"; }
.ui_list_step02 > li:nth-child(5) figure .num:after {
content: "05"; }
.ui_list_step02 > li:nth-child(6) figure .num:after {
content: "06"; }
.ui_list_step02 > li:nth-child(7) figure .num:after {
content: "07"; }
.ui_list_step02 > li:nth-child(8) figure .num:after {
content: "08"; }
.ui_list_step02 > li:nth-child(9) figure .num:after {
content: "09"; }
@media (max-width: 750px) {
.ui_list_step02 {
display: flex;
flex-direction: column; }
.ui_list_step02 > li {
width: 100%;
margin-right: 0;
margin-bottom: 73px; }
.ui_list_step02 > li:last-child {
margin-right: 0; }
.ui_list_step02 > li:last-child {
margin-bottom: 0; }
.ui_list_step02 > li > figure {
margin-bottom: 60px;
width: 100%; }
.ui_list_step02 > li > figure > .num {
bottom: -45px;
left: 50%;
transform: translateX(-50%); }
.ui_list_step02 > li > figure > .num::after {
font-size: 3.125rem;
letter-spacing: 3px; }
.ui_list_step02 > li > figure img {
width: 100%; }
.ui_list_step02 > li > .tit {
margin-bottom: 35px;
height: auto !important;
text-align: center;
font-feature-settings: 'palt'; }
.ui_list_step02 > li:hover picture img {
transform: scale(1); } }
.ui_list_step03 {
display: flex;
flex-wrap: wrap; }
.ui_list_step03 > li {
width: 300px;
margin-right: 55px;
position: relative; }
.ui_list_step03 > li:last-child {
margin-right: 0; }
.ui_list_step03 > li > .num {
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 1.875rem;
color: #d5c8b4;
line-height: 1;
position: absolute;
top: -15px;
left: -7px; }
.ui_list_step03 > li > .num:after {
content: ''; }
.ui_list_step03 > li > .pic {
margin-bottom: 16px; }
.ui_list_step03 > li > .txt > .tit {
margin-bottom: 20px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25rem;
line-height: 1.5;
border-bottom: 2px solid #d5c8b4;
text-align: center; }
.ui_list_step03 > li:nth-child(1) > .num:after {
content: "01"; }
.ui_list_step03 > li:nth-child(2) > .num:after {
content: "02"; }
.ui_list_step03 > li:nth-child(3) > .num:after {
content: "03"; }
.ui_list_step03 > li:nth-child(4) > .num:after {
content: "04"; }
.ui_list_step03 > li:nth-child(5) > .num:after {
content: "05"; }
.ui_list_step03 > li:nth-child(6) > .num:after {
content: "06"; }
.ui_list_step03 > li:nth-child(7) > .num:after {
content: "07"; }
.ui_list_step03 > li:nth-child(8) > .num:after {
content: "08"; }
.ui_list_step03 > li:nth-child(9) > .num:after {
content: "09"; }
.ui_list_step03 > li:nth-child(10) > .num:after {
content: "10"; }
.ui_list_step03 > li:nth-child(11) > .num:after {
content: "11"; }
.ui_list_step03 > li:nth-child(12) > .num:after {
content: "12"; }
.ui_list_step03 > li:nth-child(13) > .num:after {
content: "13"; }
.ui_list_step03 > li:nth-child(14) > .num:after {
content: "14"; }
.ui_list_step03 > li:nth-child(15) > .num:after {
content: "15"; }
.ui_list_step03 > li:nth-child(16) > .num:after {
content: "16"; }
.ui_list_step03 > li:nth-child(17) > .num:after {
content: "17"; }
.ui_list_step03 > li:nth-child(18) > .num:after {
content: "18"; }
.ui_list_step03 > li:nth-child(19) > .num:after {
content: "19"; }
.ui_list_step03 > li:nth-child(20) > .num:after {
content: "20"; }
@media (min-width: 751px) {
.ui_list_step03.line02 > li > .txt > .tit {
height: 76px; } }
@media (max-width: 750px) {
.ui_list_step03 {
display: block; }
.ui_list_step03 > li {
width: 100%;
margin-right: 0; }
.ui_list_step03 > li:nth-child(n + 2) {
margin-top: 70px; }
.ui_list_step03 > li > .num {
top: -28px;
left: -14px; }
.ui_list_step03 > li > .pic {
margin-bottom: 16px; }
.ui_list_step03 > li > .txt > .tit {
margin-bottom: 20px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25rem;
line-height: 1.5;
border-bottom: 2px solid #d5c8b4;
text-align: center; } }
/*====================================
CheckList
=====================================*/
.ui_list_check01 {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.ui_list_check01 > li {
flex: 0 0 auto;
width: 45.2%;
padding-left: 45px;
padding-bottom: 14px;
font-size: 1.125rem;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.7648;
color: #fff;
position: relative;
border-bottom: 1px solid #d5c8b4; }
.ui_list_check01 > li:before {
content: '';
display: block;
position: absolute;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
background-image: url("../img/ico_check01.svg");
display: block;
position: absolute;
left: 0;
top: 1px;
width: 31px;
height: 27px; }
.ui_list_check01 > li:nth-child(n + 3) {
margin-top: 15px; }
@media (min-width: 751px) {
.ui_list_check01 > li.col01 {
width: auto; } }
@media (max-width: 750px) {
.ui_list_check01 {
display: block; }
.ui_list_check01 > li {
width: 100%;
line-height: 1.6875;
padding-left: 70px;
font-size: 1.0625rem;
letter-spacing: 0;
margin-bottom: 0; }
.ui_list_check01 > li:nth-child(n + 2) {
margin-top: 28px; }
.ui_list_check01 > li:nth-child(2n) {
width: 100%; }
.ui_list_check01 > li:before {
left: 0;
top: 4px;
width: 51px;
height: 44px; } }
.ui_list_check01.type02 > li:before {
background-image: url("../img/ico_check02.svg"); }
.ui_list_check02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.ui_list_check02 .box {
width: 48%;
display: flex;
background-color: rgba(238, 232, 222, 0.5);
overflow: hidden;
position: relative;
z-index: 1; }
.ui_list_check02 .box:before {
content: '';
width: 245px;
height: 245px;
display: block;
background-image: url("../img/ico_merit.svg");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -45px;
right: -56px;
z-index: -1; }
.ui_list_check02 .box .tit {
width: 22.4%;
margin-bottom: 27px;
display: block;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr; }
.ui_list_check02 .box .tit .combine {
-webkit-text-combine: horizontal;
-moz-text-combine-upright: all;
-ms-text-combine-horizontal: all;
text-combine-upright: all; }
.ui_list_check02 .box .tit > span {
display: block; }
.ui_list_check02 .box .tit > span.en {
margin-left: -10px;
margin-right: 10px;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 3rem;
text-transform: uppercase;
color: #ab916a;
line-height: 1;
letter-spacing: 0.08em; }
.ui_list_check02 .box .tit > span.ja {
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.125rem;
line-height: 1.5; }
.ui_list_check02 .box .boxIn {
width: calc(100% - 22.4%);
padding: 65px 60px 65px 0; }
.ui_list_check02 .box.demerit {
background-color: rgba(221, 228, 237, 0.5); }
.ui_list_check02 .box.demerit:before {
width: 217.5px;
height: 217.5px;
background-image: url("../img/ico_demerit.svg");
top: -25px;
right: -40px; }
.ui_list_check02 .box.demerit .tit > span.en {
color: #a8b3c1; }
@media (max-width: 750px) {
.ui_list_check02 {
display: block; }
.ui_list_check02 .box {
width: 100%;
margin-bottom: 40px;
padding: 50px 40px;
display: block; }
.ui_list_check02 .box:last-child {
margin-bottom: 0; }
.ui_list_check02 .box .tit {
width: 100%;
margin-bottom: 48px;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
text-align: center;
font-size: 1.25rem; }
.ui_list_check02 .box .tit > span.en {
margin: 0 0 10px; }
.ui_list_check02 .box .boxIn {
width: 100%;
padding: 0; } }
.ui_list_check03 > li {
padding-left: 16px;
font-family: 'Noto Serif JP', serif;
font-weight: 600;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.125rem;
line-height: 1.5;
position: relative; }
.ui_list_check03 > li:before {
content: '';
width: 10px;
height: 10px;
display: block;
background-color: #ab916a;
position: absolute;
top: 9px;
left: 0; }
.ui_list_check03 > li:nth-child(n + 2) {
margin-top: 13px; }
.demerit .ui_list_check03 > li:before {
background-color: #a8b3c1; }
@media (max-width: 750px) {
.ui_list_check03 > li {
padding-left: 30px;
font-size: 1.0625rem; }
.ui_list_check03 > li:before {
width: 16px;
height: 16px;
top: 20px; }
.ui_list_check03 > li:nth-child(n + 2) {
margin-top: 20px; } }
/*====================================
list_faq
=====================================*/
.qanda01 > li {
overflow: hidden;
transition: height 0.3s; }
.qanda01 > li .question {
background-color: #bb9969;
padding: 10px 68px;
position: relative; }
.qanda01 > li .question:before {
content: 'Q.';
position: absolute;
left: 24px;
top: 10px;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 2.0625rem;
line-height: 1;
letter-spacing: 0.1em;
color: #ffffff; }
.qanda01 > li .question > .trigger {
width: 100%;
height: 100%;
text-decoration: none; }
.qanda01 > li .question > .trigger span {
position: absolute;
right: 10px;
top: 50%;
width: 60px;
height: 60px;
margin-top: -30px; }
.qanda01 > li .question > .trigger span:before, .qanda01 > li .question > .trigger span:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 2px;
margin: -1px -12px;
background-color: #fff;
transition: transform 0.3s; }
.qanda01 > li .question > .trigger span:after {
transform: rotate(90deg); }
.qanda01 > li .question > .trigger > .title {
font-size: 1.375rem;
line-height: 1.6667;
font-weight: normal;
color: #ffffff; }
.qanda01 > li .answer {
background-color: #fff;
padding: 22px 30px 22px 68px;
position: relative; }
.qanda01 > li .answer:before {
content: 'A.';
position: absolute;
left: 25px;
top: 16px;
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-style: normal;
font-size: 2.0625rem;
color: #bb9969;
line-height: 1;
letter-spacing: 0.1em; }
.qanda01 > li:nth-child(n + 2) {
margin-top: 50px; }
.qanda01 > li.open .question .trigger span:after {
transform: rotate(0deg); }
@media (max-width: 750px) {
.qanda01 > li .question {
padding: 20px 105px 20px 121px; }
.qanda01 > li .question:before {
font-size: 1.875rem;
left: 35px;
top: 50%;
margin-top: -34px; }
.qanda01 > li .question > .trigger span {
right: 25px;
top: 50%;
width: 80px;
height: 80px;
margin-top: -40px; }
.qanda01 > li .question > .trigger span:before, .qanda01 > li .question > .trigger span:after {
width: 40px;
height: 4px;
margin: -2px -10px; }
.qanda01 > li .question > .trigger > .title {
font-size: 1.0625rem;
line-height: 1.5; }
.qanda01 > li .answer {
padding: 30px 40px 30px 121px; }
.qanda01 > li .answer:before {
left: 35px;
top: 25px;
font-size: 1.875rem; }
.qanda01 > li:nth-child(n + 2) {
margin-top: 40px; } }
/*====================================
button
=====================================*/
.ui_btn01 {
margin-top: 40px;
display: flex;
justify-content: center; }
.ui_btn01 > a {
min-width: 300px;
padding: 14px 30px;
display: flex;
text-decoration: none;
font-weight: 400;
color: #fff;
line-height: 1.5;
font-feature-settings: 'palt' 1;
letter-spacing: 0.1em;
border: 1px solid #fff;
justify-content: center;
align-items: center;
position: relative; }
.ui_btn01 > a .txt {
display: flex;
overflow: hidden;
position: relative;
flex-direction: column;
height: 25px;
width: 100%;
align-items: center;
line-height: 1.5; }
.ui_btn01 > a .txt span {
display: flex; }
.ui_btn01 > a .txt > span > span {
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.ui_btn01 > a .txt > span > span > span {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.ui_btn01 > a .txt > span > span > span:nth-child(2) {
transition-delay: 20ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(3) {
transition-delay: 30ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(4) {
transition-delay: 40ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(5) {
transition-delay: 50ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(6) {
transition-delay: 60ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(7) {
transition-delay: 70ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(8) {
transition-delay: 80ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(9) {
transition-delay: 90ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(10) {
transition-delay: 100ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(11) {
transition-delay: 110ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(12) {
transition-delay: 120ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(13) {
transition-delay: 130ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(14) {
transition-delay: 140ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(15) {
transition-delay: 150ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(16) {
transition-delay: 160ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(17) {
transition-delay: 170ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(18) {
transition-delay: 180ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(19) {
transition-delay: 190ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(20) {
transition-delay: 200ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(21) {
transition-delay: 210ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(22) {
transition-delay: 220ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(23) {
transition-delay: 230ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(24) {
transition-delay: 240ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(25) {
transition-delay: 250ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(26) {
transition-delay: 260ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(27) {
transition-delay: 270ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(28) {
transition-delay: 280ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(29) {
transition-delay: 290ms; }
.ui_btn01 > a .txt > span > span > span:nth-child(30) {
transition-delay: 300ms; }
.ui_btn01 > a .txt > span:nth-child(2) span span {
opacity: 0; }
.ui_btn01 > a .ico {
width: 9px;
height: 9px;
display: block;
position: absolute;
top: calc(50% - 5px);
right: 14px;
transform: matrix(1, 0, 0, 1, 0, 0);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.ui_btn01 > a .ico:after {
content: '';
width: 9px;
height: 9px;
display: block;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 5px);
right: 0; }
.ui_btn01 > a .ico.active {
opacity: 0;
transform: matrix(1, 0, 0, 1, -10, 0); }
.ui_btn01 > a:hover > .txt > span:nth-child(1) > span > span {
opacity: 0;
transform: translate(0, -100%); }
.ui_btn01 > a:hover > .txt > span:nth-child(2) > span > span {
opacity: 1;
transform: translate(0, -100%); }
.ui_btn01 > a:hover > .ico {
transform: matrix(1, 0, 0, 1, 10, 0);
opacity: 0; }
@media (max-width: 750px) {
.ui_btn01 > a {
min-width: 440px;
padding: 23px 50px;
letter-spacing: 0.12em; }
.ui_btn01 > a .txt {
height: 43px; }
.ui_btn01 > a .ico {
width: 15px;
height: 15px;
right: 33px;
top: calc(50% - 13px); }
.ui_btn01 > a .ico:after {
width: 18px;
height: 18px;
border-width: 4px 4px 0 0;
top: calc(50% - 5px); } }
/*====================================
modal
=====================================*/
.ui_modal01.tabpanellist {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1010;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.9);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s; }
.ui_modal01.tabpanellist[aria-hidden='false'] {
pointer-events: auto;
opacity: 1; }
.ui_modal01.tabpanellist .tabpanel {
flex: 0 0 auto;
width: 960px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: auto 0;
padding: 80px 0; }
.ui_modal01.tabpanellist .tabpanel[aria-hidden='true'] {
display: none; }
.ui_modal01.tabpanellist .tabpanel > iframe {
display: block;
width: 960px;
height: 540px; }
.ui_modal01.tabpanellist .modalclose {
display: block;
position: fixed;
right: 35px;
top: 35px;
width: 65px;
height: 65px;
background-color: #b28850;
z-index: 10; }
.ui_modal01.tabpanellist .modalclose:before, .ui_modal01.tabpanellist .modalclose:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 32px;
height: 4px;
background-color: #fff;
margin: -2px -16px;
transform: rotate(45deg); }
.ui_modal01.tabpanellist .modalclose:after {
transform: rotate(-45deg); }
@media (max-width: 750px) {
.ui_modal01.tabpanellist .tabpanel {
width: 690px;
display: block;
padding: 180px 0; }
.ui_modal01.tabpanellist .tabpanel > iframe {
width: 690px;
height: 388px; }
.ui_modal01.tabpanellist .modalclose {
right: 0;
top: 0;
width: 120px;
height: 120px; }
.ui_modal01.tabpanellist .modalclose:before, .ui_modal01.tabpanellist .modalclose:after {
width: 48px;
height: 8px;
margin: -4px -24px; } }
.ui_modal02.tablist {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.ui_modal02.tablist > li {
flex: 0 0 auto;
padding: 0; }
.ui_modal02.tablist > li:nth-child(n + 3) {
margin-top: 25px; }
.ui_modal02.tablist > li > a {
display: flex;
align-items: center;
width: 530px;
text-decoration: none;
color: #12467e;
background-color: #eff3f9;
font-size: 19px;
line-height: 1.5;
font-feature-settings: 'palt';
padding-right: 50px;
position: relative;
transition: background-color 0.3s, color 0.3s; }
.ui_modal02.tablist > li > a > figure {
flex: 0 0 auto;
margin-right: 30px; }
.ui_modal02.tablist > li > a > figure img {
width: 180px;
height: auto; }
.ui_modal02.tablist > li > a > p {
flex: 1 1 auto; }
.ui_modal02.tablist > li > a:after {
content: '';
display: block;
position: absolute;
right: 20px;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #12467e;
border-width: 2px 2px 0 0;
transform-origin: right top;
transform: rotate(45deg);
transition: border-color 0.3s; }
.ui_modal02.tablist > li > a:hover, .ui_modal02.tablist > li > a[aria-selected='true'] {
background-color: #12467e;
color: #ffffff; }
.ui_modal02.tablist > li > a:hover:after, .ui_modal02.tablist > li > a[aria-selected='true']:after {
border-color: #fff; }
@media (max-width: 750px) {
.ui_modal02.tablist {
display: block; }
.ui_modal02.tablist > li {
width: 100%; }
.ui_modal02.tablist > li:nth-child(n + 2) {
margin-top: 30px; }
.ui_modal02.tablist > li > a {
width: auto;
font-size: 30px; }
.ui_modal02.tablist > li > a > figure {
flex: 0 0 auto;
margin-right: 40px; }
.ui_modal02.tablist > li > a > figure img {
width: 240px; }
.ui_modal02.tablist > li > a:after {
right: 20px;
width: 20px;
height: 20px;
border-width: 4px 4px 0 0; } }
.ui_modal02.tabpanellist {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1010;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.9);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s; }
.ui_modal02.tabpanellist[aria-hidden='false'] {
pointer-events: auto;
opacity: 1; }
.ui_modal02.tabpanellist .tabpanel {
flex: 0 0 auto;
width: 1100px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: auto 0;
padding: 80px 0; }
.ui_modal02.tabpanellist .tabpanel > figure {
flex: 0 0 auto;
transition: opacity 0.3s, transform 0.3s; }
.ui_modal02.tabpanellist .tabpanel > .table_wrap {
flex: 1 1 auto;
margin: 50px 0 0 -30px;
position: relative;
z-index: 1;
transition: opacity 0.3s, transform 0.3s; }
.ui_modal02.tabpanellist .tabpanel > .table_wrap .ui_table01 {
margin: 0; }
.ui_modal02.tabpanellist .tabpanel > .btn {
flex: 0 0 auto;
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px;
transition: opacity 0.3s, transform 0.3s; }
.ui_modal02.tabpanellist .tabpanel > .btn > a {
display: block; }
.ui_modal02.tabpanellist .tabpanel > .btn > a:nth-child(n + 2) {
margin-left: 30px; }
.ui_modal02.tabpanellist .tabpanel[aria-hidden='true'] {
display: none; }
.ui_modal02.tabpanellist .tabpanel[aria-hidden='true'] > figure,
.ui_modal02.tabpanellist .tabpanel[aria-hidden='true'] > .table_wrap,
.ui_modal02.tabpanellist .tabpanel[aria-hidden='true'] > .btn {
opacity: 0; }
.ui_modal02.tabpanellist .tabpanel.leave > figure, .ui_modal02.tabpanellist .tabpanel.enter > figure {
opacity: 0;
transform: translateX(-60px); }
.ui_modal02.tabpanellist .tabpanel.leave > .table_wrap, .ui_modal02.tabpanellist .tabpanel.enter > .table_wrap {
opacity: 0;
transform: translateX(60px); }
.ui_modal02.tabpanellist .tabpanel.leave > .btn, .ui_modal02.tabpanellist .tabpanel.enter > .btn {
opacity: 0;
transform: translateY(30px); }
.ui_modal02.tabpanellist .modalclose {
display: block;
position: fixed;
left: 50px;
top: 50px;
width: 54px;
height: 54px;
background-color: #eff3f9;
border-radius: 50%;
z-index: 10; }
.ui_modal02.tabpanellist .modalclose:before, .ui_modal02.tabpanellist .modalclose:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 4px;
background-color: #12467e;
margin: -2px -12px;
transform: rotate(45deg); }
.ui_modal02.tabpanellist .modalclose:after {
transform: rotate(-45deg); }
.ui_modal02.tabpanellist .tabprev,
.ui_modal02.tabpanellist .tabnext {
position: fixed;
left: 50px;
top: 50%;
width: 54px;
height: 54px;
margin-top: -27px;
background-color: #eff3f9;
border-radius: 50%;
z-index: 10; }
.ui_modal02.tabpanellist .tabprev:before,
.ui_modal02.tabpanellist .tabnext:before {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
border: 1px solid #003769;
border-width: 4px 0 0 4px;
transform-origin: 6px 6px;
transform: rotate(-45deg);
margin: -6px;
transition: border-color 0.3s; }
.ui_modal02.tabpanellist .tabnext {
left: auto;
right: 50px; }
.ui_modal02.tabpanellist .tabnext:before {
transform: rotate(135deg); }
@media (max-width: 750px) {
.ui_modal02.tabpanellist .tabpanel {
width: auto;
display: block;
padding: 180px 40px; }
.ui_modal02.tabpanellist .tabpanel > figure img {
width: 100%;
height: auto; }
.ui_modal02.tabpanellist .tabpanel > .table_wrap {
margin: 50px 0 0;
width: 100%; }
.ui_modal02.tabpanellist .tabpanel > .btn {
display: block;
margin-top: 50px; }
.ui_modal02.tabpanellist .tabpanel > .btn > a {
display: block; }
.ui_modal02.tabpanellist .tabpanel > .btn > a:nth-child(n + 2) {
margin: 20px 0 0; }
.ui_modal02.tabpanellist .modalclose {
left: 37px;
top: 37px;
width: 106px;
height: 106px; }
.ui_modal02.tabpanellist .modalclose:before, .ui_modal02.tabpanellist .modalclose:after {
width: 48px;
height: 8px;
margin: -4px -24px; }
.ui_modal02.tabpanellist .tabprev,
.ui_modal02.tabpanellist .tabnext {
left: 180px;
top: 37px;
width: 106px;
height: 106px;
margin: 0; }
.ui_modal02.tabpanellist .tabprev:before,
.ui_modal02.tabpanellist .tabnext:before {
width: 32px;
height: 32px;
border-width: 8px 0 0 8px;
transform-origin: 12px 12px;
margin: -12px; }
.ui_modal02.tabpanellist .tabnext {
right: auto;
left: 323px; }
.ui_modal02.tabpanellist .tabnext:before {
transform: rotate(135deg); } }
/*====================================
documentContents
=====================================*/
#documentContents {
z-index: 100;
position: relative;
width: 1100px;
margin: 0 auto 80px;
padding: 50px 0;
border-top: 4px solid #ccc;
border-bottom: 4px solid #ccc; }
#documentContents h1 {
font-size: 2.1875rem; }
#documentContents h1::before {
content: 'h1｜'; }
#documentContents h2 {
font-size: 1.875rem; }
#documentContents h2::before {
content: 'h2｜'; }
#documentContents h3 {
font-size: 1.71875rem; }
#documentContents h3::before {
content: 'h3｜'; }
#documentContents h4 {
font-size: 1.5625rem; }
#documentContents h4::before {
content: 'h4｜'; }
#documentContents h5 {
font-size: 1.40625rem; }
#documentContents h5::before {
content: 'h5｜'; }
#documentContents h6 {
font-size: 1.25rem; }
#documentContents h6::before {
content: 'h6｜'; }
#documentContents ol,
#documentContents ul {
margin-left: 30px; }
#documentContents hr {
width: 100%;
margin: 2em 0;
border-width: 2px 0 0; }
#documentContents p,
#documentContents table {
margin-bottom: 20px; }
#documentContents > *:last-child {
margin-bottom: 0px; }
@media (max-width: 750px) {
#documentContents {
width: auto; } }