@charset "utf-8"; /* CSS base.css */ /* main #cc0001 sub #79511b */ /*////////////////// Header //////////////////*/ #header { width: 100%; z-index: 100; height: 130px; } #header .incnt { position: static; width: 92%; } #header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; height: 90px; } #header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 130px; } #header .logo { line-height: 0; position: relative; z-index: 10000; } #header .logo a{ text-decoration: none; } #header .logo img { width: 130px; vertical-align: middle; } #header .logo .cap{ font-size: 1.4rem; display: inline-block; vertical-align: middle; margin-left: 10px; line-height: 1.5; } body.enbody #header .logo .cap{ font-size: 1.4rem; } #header.fixed .mainbox, #header.fixed .list+.mainbox { height: 90px; } #header.fixed .logo img { width: 100px; } #header .list{ font-size: 1.4rem; text-align: right; padding-top: 10px; padding-right: 21px; } #header .list>li{ display: inline-block; vertical-align: middle; } #header .list>li:after{ content: " | "; } #header .list>li:last-child:after{ content: none } #header .list+.mainbox{ height: 100px; } @media screen and (max-width: 1350px) { #header .logo .cap{ display: none; } } @media screen and (max-width: 1040px) { #header .mainbox, #header .list+.mainbox { height: 110px; } #header .logo{ width: 100%; } #header .logo img{ max-width: 120px; width: 100%; } #header .list{ display: none; } } @media screen and (max-width: 760px) { #header { width: 100%; z-index: 100; height: 100px; } #header .mainbox, #header .list+.mainbox { height: 100px; } #header .logo img{ max-width: 90px; } } /* スライド画像のエフェクト */ @keyframes navfit { 0% { transform: translate(0px, -50px); } 100% { transform: translate(0px, 0px); } } /*////////////////// Nav //////////////////*/ #gnav{display: flex;text-align: right;} #gnav .navbox{ display: flex; } #gnav .incnt.fix{ width: 100%; margin: 0; display: flex; } #gnav .mainlist li.sub { display: none; } #gnav>.navbox, #gnav>.navbox>.mainlistcover, #gnav>.navbox>.mainlistcover>.inwrap{ display: flex; } #gnav>.navbox>.mainlistcover>.inwrap{display: flex;flex-direction: row;text-align: right;align-items: center;} #gnav .mainlist { display: inline-block; } #gnav .mainlist>li { display: inline-block; vertical-align: middle; margin-left: 10px; } #gnav .mainlist>li:first-child { border-left: none; } #gnav .mainlist>li a { text-decoration: none; } #gnav .mainlist>li:first-child{ display: none; } #gnav ._lineupnavlist{/*position: absolute;top: 126px;left: 0;right: 0;z-index: 100;*/width: 100%; /*background: rgb(230,242,249);background: -moz-linear-gradient(top, rgba(230,242,249,1) 0%, rgba(241,240,246,1) 100%);background: -webkit-linear-gradient(top, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%);background: linear-gradient(to bottom, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f2f9', endColorstr='#f1f0f6',GradientType=0 );*/ text-align: justify;/*display: none;*/} #gnav ._lineupnavlist>ul{ display: flex; flex-direction: row; justify-content: center; /*padding-top: 40px; padding-bottom: 40px;*/ margin-left: -30px; } #gnav ._lineupnavlist>ul>li{ display: flex; flex-direction: column;font-size: 1.4rem;margin-left: 30px;} #gnav ._lineupnavlist>ul>li ._parentcat{ margin-bottom: 3px; } #gnav ._lineupnavlist>ul>li ._parentcat>a{ text-decoration: none; } #gnav ._lineupnavlist>ul>li ._childcat{ padding: 0 5px; } #gnav ._lineupnavlist>ul>li ._childcat>li>a{ text-decoration: none; } #gnav ._lineupnavlist>ul>li ._childcat>li>a::before{ content: "-"; margin-right: 5px; } #gnav ._lineupnavlist>ul>li ._parentcat>a:hover, #gnav ._lineupnavlist>ul>li ._childcat>li>a:hover{ color: #75bef8; } #header.fixed #gnav ._lineupnavlist{ top: 86px; } #gnav .mainlist>li[data-cat="lineup"] ._lineup, #gnav ._lineupnavlist>ul>li ._childcat, #gnav ._lineupnavlist>ul>li:first-child{ display: none; } #gnav .telnumlist{display: inline-block;vertical-align: middle;margin-left: 25px;padding-top: 10px;} #gnav .telnumlist .contactlink{ display: inline-block; vertical-align: middle; } #gnav .telnumlist .contactlink>a{ display: inline-block; text-decoration: none; font-weight: bold; font-style: italic; padding: 10px 21px; border-radius: 30px; position: relative; z-index: 0; overflow-y: hidden; font-size: 1.8rem; } #gnav .telnumlist .contactlink>a:before{ content:""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; transition: 0.5s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fa+0,f1f0f6+100 */ background: rgb(231,243,250); /* Old browsers */ background: -moz-linear-gradient(left, rgba(231,243,250,1) 0%, rgba(241,240,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fa', endColorstr='#f1f0f6',GradientType=1 ); /* IE6-9 */ } #gnav .telnumlist .contactlink>a:after{ content:""; width: 100%; height: 100%; position: absolute; z-index: -2; left: 0; top: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f1f7+0,dbd7f4+100 */ background: rgb(230,241,247); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(230,241,247,1) 0%, rgba(219,215,244,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(230,241,247,1) 0%,rgba(219,215,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(230,241,247,1) 0%,rgba(219,215,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f1f7', endColorstr='#dbd7f4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #gnav .telnumlist .contactlink>a svg{ width: 24px; height: 18px; vertical-align: -2px; } #gnav .telnumlist .contactlink>a:hover{ opacity: 1; color: inherit; } #gnav .telnumlist .contactlink>a:hover:before{ opacity: 0; } #gnav .telnumlist .tellink, #gnav .languagelist { display: none; } #gnav .snsbtnbox{ margin-left: 15px; } #gnav .snsbtnbox>li{ display: inline-block; vertical-align: middle; } @media screen and (max-width: 1040px){ #gnav{z-index: 1000;position: fixed;top: 0;bottom: 0;right: 0;height: 100vh!important;display: block; width: 100%;pointer-events: none;transition: right 1s cubic-bezier(0.25, 1, 0.5, 1) 0s;padding-right: 0;} #gnav>.navbox{ position: relative; z-index: 10; } #gnav>.navbox, #gnav>.navbox>.mainlistcover, #gnav>.navbox>.mainlistcover>.inwrap{display: flex;flex-direction: column;text-align: left;height: 100%;width: 100%;} #gnav>.inwrap{ position: relative; z-index: 10; display: block; width: 100%; height: 100%; } #gnav .mainlistcover{ display: flex!important; justify-content: center; width: 100%; height: 100%; } #gnav .mainlistcover>.inwrap{width: 100%;padding: 110px 12% 110px;box-sizing: border-box;height: auto;display: flex !important;overflow: hidden;overflow-y: scroll;-ms-overflow-style: none;} #gnav>.navbox>.mainlistcover>.inwrap{ padding-top: 110px; } #gnav>.navbox>.mainlistcover>.inwrap::-webkit-scrollbar { display: none; } #gnav.is-open .languagelist, #gnav.is-open .mainlist>li, #gnav.is-open .telnumlist>li, #gnav.is-open .snsbtnbox>li{ transition: .3s; opacity: 0 } #gnav>.navbox>.mainlistcover>.inwrap .gmainbox{display: block;width: 100%;} #gnav .mainlist { position: static; display: block; text-align: center; height: auto; max-width: 100%; border-right: none; } #gnav .mainlist>li { display: block!important; margin: 0; float: none; opacity: 0; margin-bottom: 20px; } #gnav .mainlist>li:last-child{ margin-bottom: 0; } #gnav .mainlist>li a { border-left: none; } #gnav .mainlist>li>a{ display: block; text-align: center; } #gnav .mainlist>li.current a:before { display: none; margin-top: 0; } #gnav .mainlist li.current>a>span { position: relative; overflow-y: hidden; } #gnav .mainlist li.current>a>span:after{ content: ""; background: #191919; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; width: 100%; } /* telnumlist */ #gnav .telnumlist { margin-top: 45px; position: relative; display: block; text-align: center; margin-left: 0; } #gnav .languagelist, #gnav .telnumlist>li{ opacity: 0; line-height: 1.6; } #gnav .telnumlist a{ text-decoration: none; font-size: 2.4rem; font-weight: bold; font-style: italic; } #gnav .telnumlist .tellink, #gnav .snsbtnbox { display: block; } #gnav .telnumlist .tellink svg{ width: 23px; height: 23px; margin-right: 10px; } #gnav .telnumlist .contactlink>a svg{ width: 26px; height: 20px; margin-right: 5px; vertical-align: 0; } #gnav .snsbtnbox{ margin-top: 20px; margin-left: 0; } #gnav .snsbtnbox>li{ opacity: 0; } #gnav .languagelist{ font-size: 1.4rem; text-align: center; padding-top: 20px; display: block; } #gnav .languagelist>li{ display: inline-block; vertical-align: middle; } #gnav .languagelist>li:after{ content: " | "; } #gnav .languagelist>li:last-child:after{ content: none } #gnav .telnumlist .contactlink>a{ display: block; padding: 0; border-radius: 0; font-size: 2.4rem; } #gnav .telnumlist .contactlink>a:before{ content:none } #gnav .telnumlist .contactlink>a:after{ content:none } #gnav ._lineupnavlist{ position: static; top: 0; background: transparent; text-align: center;display: block; } #gnav ._lineupnavlist>ul{ display: block; padding-top: 0; padding-bottom: 0; } #gnav ._lineupnavlist>ul>li{ display: block;} #gnav ._lineupnavlist>ul>li:not(:nth-child(2)){ margin-top: 20px; } #gnav ._lineupnavlist>ul>li:first-child{ display: none; } #gnav ._lineupnavlist>ul>li ._parentcat{ margin-bottom: 0; } #gnav ._lineupnavlist>ul>li ._parentcat>a{ padding: 0; } #gnav ._lineupnavlist>ul>li ._childcat{ margin-left: -10px; } #gnav ._lineupnavlist>ul>li ._childcat>li{ display: inline-block; vertical-align: middle; margin-left: 10px; } #gnav ._lineupnavlist>ul>li ._childcat>li>a{ padding: 0; } #gnav ._lineupnavlist>ul>li ._parentcat a, #gnav .mainlist>li[data-cat="lineup"] ._lineup .txt, #gnav .mainlist>li:first-child span{ font-weight: bold; font-size: 1.6rem; } #gnav .mainlist>li[data-cat="lineup"] ._lineup .txt{ font-size: 2rem; padding-bottom: 10px; display: block; } #gnav .mainlist>li[data-cat="lineup"] ._lineup, #gnav ._lineupnavlist>ul>li ._childcat{ display: block; } #gnav .bg {webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-timing-function: cubic-bezier(.075, .82, .165, 1); transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fa+0,f1f0f6+100 */ background: rgb(231,243,250); /* Old browsers */ background: -moz-linear-gradient(left, rgba(231,243,250,1) 0%, rgba(241,240,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fa', endColorstr='#f1f0f6',GradientType=1 ); /* IE6-9 */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0; -webkit-transform:scale(0.9,0.9); transform:scale(0.9,0.9); -webkit-transition: all 0.6s cubic-bezier(0,.53,.41,1); transition: all 0.6s cubic-bezier(0,.53,.41,1); } #gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); } #gnav .bg .inbg{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2; transition: all .6s; cursor: pointer; display: block; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fa+0,f1f0f6+100 */ background: rgb(231,243,250); /* Old browsers */ background: -moz-linear-gradient(left, rgba(231,243,250,1) 0%, rgba(241,240,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(231,243,250,1) 0%,rgba(241,240,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fa', endColorstr='#f1f0f6',GradientType=1 ); /* IE6-9 */ } #gnav.is-open{ pointer-events: auto; right: 0; } #gnav.is-open .bg{ pointer-events:auto; } #gnav.is-open .languagelist, #gnav.is-open .mainlist>li, #gnav.is-open .telnumlist>li, #gnav.is-open .snsbtnbox>li { opacity:1; transition: 3s; } #gnav.is-open .mainlist>li:nth-child(1) { -webkit-transition-delay: .24s; transition-delay: .24s; } #gnav.is-open .mainlist>li:nth-child(2) { -webkit-transition-delay: .32s; transition-delay: .32s; } #gnav.is-open .mainlist>li:nth-child(3) { -webkit-transition-delay: .40s; transition-delay: .40s; } #gnav.is-open .languagelist{ -webkit-transition-delay: .48s; transition-delay: .48s; } #gnav.is-open .telnumlist>li:nth-child(1) { -webkit-transition-delay: .56s; transition-delay: .56s; } #gnav.is-open .telnumlist>li:nth-child(2) { -webkit-transition-delay: .64s; transition-delay: .64s; } #gnav.is-open .snsbtnbox>li:nth-child(1) { -webkit-transition-delay: .72s; transition-delay: .72s; } #gnav.is-open .snsbtnbox>li:nth-child(2) { -webkit-transition-delay: .8s; transition-delay: .8s; } } @media screen and (max-width: 767px){ #gnav .mainlist>li{ margin-bottom: 8px; font-size: 1.8rem; } #gnav .mainlistcover>.inwrap{padding: calc(40px + 10vh) 10% calc(40px + 10vh);} #gnav>.navbox>.mainlistcover>.inwrap{ padding-top: calc(40px + 10vh); } } @media screen and (max-width: 500px){ } /*////////////////// Menubtn //////////////////*/ #menubtn {display: none; z-index: 30000; } @media screen and (max-width: 1040px){ #menubtn { position: fixed; top: 20px; right: 6%; display: block; background: transparent; width: 60px; height: 60px; cursor: pointer; background: #fff; border-radius: 50%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } #menubtn a { text-decoration: none; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; width: 38px; height: 8px; margin-top: -14px; } #menubtn a:after{ content: "menu"; color: #191919; position: absolute; bottom: -30px; font-size: 1.3rem; font-weight: bold; font-family: Roboto, 'Roboto', sans-serif; letter-spacing: 0.05em; font-style: italic; text-align: center; left: 0; } #menubtn a .line { width: 38px; height: 4px; background: #191919; position: absolute; left: 50%; margin-left: -19px;transition: all 0.6s; } #menubtn a #line1 { top: 0; } #menubtn a #line2 { top: 100%; } #menubtn.active a .txt { display: none; } #menubtn.active a .line { width: 29px; } #menubtn.active a #line1 { -webkit-transform:translateY(4px) translateX(4px) rotate(45deg); transform:translateY(4px) translateX(4px) rotate(45deg); } #menubtn.active a #line2 { -webkit-transform:translateY(-4px) translateX(4px) rotate(-45deg); transform:translateY(-4px) translateX(4px) rotate(-45deg); } } /*////////////////// Mainv_index //////////////////*/ /*============================ #mainv_index ============================*/ #mainv_index div.slide .slick-slide { height: calc(20vw + 500px);; } @media screen and (max-width: 1600px){ #mainv_index div.slide .slick-slide { height: calc(40vw + 100px); } } @media screen and (max-width: 1040px){ #mainv_index div.slide .slick-slide { height: auto; } } #mainv_index div.slide ul.slidebox li>.inwrap{ position: relative; } #mainv_index div.slide ul.slidebox li>.inwrap .txtbox{position: relative;z-index: 2;padding: 40px 6%;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;} #mainv_index div.slide ul.slidebox li>.inwrap .bg1 {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;object-fit: cover;height: 100%;width: 100%;} #mainv_index div.slide ul.slidebox li>.inwrap .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap .bg1 source { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute;top: 0;bottom: 0;left: 0;right: 0;} #mainv_index div.slide ul.slidebox li>.inwrap._1 .txtbox { margin-right: 3%;} #mainv_index div.slide ul.slidebox li>.inwrap._1, #mainv_index div.slide ul.slidebox li>.inwrap._2, #mainv_index div.slide ul.slidebox li>.inwrap._3 {display: flex;justify-content: flex-end;align-items: center;position: relative; height: 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._2 { justify-content: flex-start; } #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox {flex-shrink: 0;min-width: 680px; width: 40%;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox .img {text-align: center;margin-bottom: 60px;max-width: 158px;width: 100%;margin-left: auto;margin-right: auto;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.en {font-size: 8.3rem;line-height: 1.2;margin-bottom: 40px;letter-spacing: -0.01em;font-weight: 500;text-align: center;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox br._1{ display: none; } #mainv_index div.slide ul.slidebox li>.inwrap div.txtbox p.txt {font-size: 2.4rem;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox {padding-left: 4%;padding-right: 4%;width: 60%;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt {padding-left: 10%;padding-right: 10%;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img { margin-top: 50px; max-width: 1062px;width: 100%; } #mainv_index div.slide ul.slidebox li>.inwrap._1 .bg1, #mainv_index div.slide ul.slidebox li>.inwrap._1 .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap._1 .bg1 source{object-position: 10% 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._2 .bg1, #mainv_index div.slide ul.slidebox li>.inwrap._2 .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap._2 .bg1 source{object-position: 50% 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1, #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 source{object-position: 50% 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox {flex-shrink: 0;min-width: 680px; width: 46%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title {margin: 80px 0;line-height: 1.6;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub, #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main{ display: inline-block; vertical-align: middle; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub {font-size: 5.2rem;font-weight: bold;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main { font-size: 5.9rem; font-weight: 500; letter-spacing: 0.02em; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 {font-size: 2.4rem;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 br {display:none } #mainv_index div.slide .slidebox .slick-dots{position: absolute;bottom: 50px;left: 0;right: 0;z-index: 10000;text-align: center;font-size: 0;} #mainv_index div.slide .slidebox .slick-dots li{display: inline-block;vertical-align: middle;margin: 0 7px;} #mainv_index div.slide .slidebox .slick-dots button{width: 8px;height: 8px;display: inline-block;background: #c8c8c8;border-radius: 50%;transition: .4s;padding: 0;font-size: 0;min-width: inherit;} #mainv_index div.slide .slidebox .slick-dots button:hover, #mainv_index div.slide .slidebox .slick-dots .slick-active button{ background: #646464; } @media screen and (max-width: 1700px){ #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox {flex-shrink: 0;min-width: 700px; width: 46%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title {margin: 50px 0;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub { font-size: 4.4rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main{ font-size: 5.3rem; } } @media screen and (max-width: 1400px){ #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox {width: 600px; } #mainv_index div.slide ul.slidebox li>.inwrap._1 .txtbox { margin-right: 0;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.en {font-size: 7rem; margin-bottom: 30px;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox .img {margin-bottom: 50px;max-width: 140px;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt {padding-left: 7%;padding-right: 7%; margin-top: 20px;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img { margin-top: 30px; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox { min-width: 600px; width: 46%; padding-right: 4%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub { font-size: 3.8rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main{ font-size: 4.6rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 { font-size: 2rem; } #mainv_index div.slide ul.slidebox li>.inwrap div.txtbox p.txt{ font-size: 2rem; } } @media screen and (max-width: 1200px){ #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox {width: 50%; ;min-width: 480px; } #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.en {font-size: 6rem;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt {padding-left: 5%;padding-right: 5%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox { min-width: 500px; width: 46%; padding-right: 4%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub { font-size: 3.3rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main { font-size: 3.7rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 { font-size: 1.8rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title {margin: 40px 0;} } @media screen and (max-width: 1040px){ #mainv_index div.slide ul.slidebox li>.inwrap .txtbox{padding: 0;display: block;height:auto;height:auto; } #mainv_index div.slide ul.slidebox li>.inwrap{ margin-top: 40px; } #mainv_index div.slide ul.slidebox li>.inwrap._1 {display: block;margin-top: 0;} #mainv_index div.slide ul.slidebox li>.inwrap._1 .bg1{ display: block; object-position: 0% 100%; height: 600px; position: relative;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox {width: 100%;margin-top: 40px;padding: 0 6%;box-sizing: border-box;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox {min-width: 0; width: 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox .img {margin-bottom: 30px;max-width: 96px;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.en {font-size: 4.5rem;margin-bottom: 50px;} #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox br._1{ display: block; } #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.txt { text-align: center;} #mainv_index div.slide ul.slidebox li>.inwrap div.txtbox p.txt { font-size: 2rem; } #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox {padding-left: 0;padding-right: 0;width: 101%;display: flex;flex-direction: column-reverse;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt {padding-left: 8%;padding-right: 8%;margin-top: 40px;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt br{ display: none; } #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img { margin: 0 auto;max-width: 100%;width: 100%; max-width: 600px;padding-left:0;box-sizing: border-box;} #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img, #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img img, #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img source{ width: 100%; } #mainv_index div.slide ul.slidebox li>.inwrap._2 .bg1{ display: none; } #mainv_index div.slide ul.slidebox li>.inwrap._3 { flex-direction: column-reverse; margin-top: 90px;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox { min-width: 0; width: 88%; padding-right: 0; text-align: center; margin-top: 40px} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title {margin: 40px 0 20px;} #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 { width: 100%;height: 40vw; position:relative; } #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 img{ height: 100%; width: 100%; object-fit: cover; display: block; position: absolute;top: 0;bottom: 0;left: 0;right: 0;} #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1, #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 img {object-position: 80% 100%;} #mainv_index div.slide ul.slidebox li>.inwrap .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap .bg1 source{ object-position: 0 100%; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 { font-size: 1.8rem; } } @media screen and (max-width: 767px){ #mainv_index div.slide ul.slidebox li>.inwrap .bg1, #mainv_index div.slide ul.slidebox li>.inwrap .bg1 img, #mainv_index div.slide ul.slidebox li>.inwrap .bg1 source {position: static;height: auto;} #mainv_index div.slide ul.slidebox li>.inwrap._1 .bg1{ height: auto; } #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox .img { padding: 0 4%; box-sizing: border-box; } } @media screen and (max-width: 500px){ #mainv_index div.slide ul.slidebox li>.inwrap._1 div.txtbox p.txt { text-align: left;} #mainv_index div.slide ul.slidebox li>.inwrap div.txtbox p.txt { font-size: 1.6rem; } #mainv_index div.slide ul.slidebox li>.inwrap._2 div.txtbox p.txt { margin-top: 30px;} #mainv_index div.slide ul.slidebox li>.inwrap._3 { flex-direction: row; margin-top: 60px; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub, #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main{ display: inline-block; vertical-align: middle; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.sub { font-size: 2.2rem; display:block } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox div.title p.main { font-size: 2.5rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 { width: 35%; display: flex; flex-shrink: 0; height: 80vw; position:relative; } #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 img{ height: 100%; width: 100%; object-fit: cover; display: block; position: absolute;top: 0;bottom: 0;left: 0;right: 0;} #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1, #mainv_index div.slide ul.slidebox li>.inwrap._3 .bg1 img {object-position: 68% 100%;} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox { width: 66%; padding: 0 6%; text-align: justify; margin-top: 0} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox br {display:none} #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 { font-size: 1.4rem; } #mainv_index div.slide ul.slidebox li>.inwrap._3 div.txtbox p.txt2 br {display:block } } /*////////////////// Mainv //////////////////*/ #mainv { margin: 60px 6% 0; } #mainv .pagesubtitle{ font-size: 5.8rem; font-weight: bold; font-style: italic; line-height: 1; text-align: center; } #lineup:not(.index) .pagesubtitle{ font-size: 4.8rem; margin-bottom: 10px; } #mainv .pagetitle{ font-size: 1.8rem; text-align: center; } @media screen and (max-width: 1040px){ #mainv { margin-top: 10px; } #mainv .pagesubtitle{ font-size: 5rem; } #lineup:not(.index) .pagesubtitle{ font-size: 4rem; } #mainv .pagetitle{ font-size: 1.6rem; } } @media screen and (max-width: 767px){ #mainv { margin-top: 0; } #mainv .pagesubtitle{ font-size: 4rem; } #lineup:not(.index) .pagesubtitle{ font-size: 3rem; } #mainv .pagetitle{ font-size: 1.4rem; } } /*////////////////// Pankuzu //////////////////*/ #pankuzu { line-height: 1.4; padding:15px 0; background: #f7f7f7; } #pankuzu ol { margin: 0 60px; font-size: 0; } #pankuzu ol li { display:inline; font-size: 16px; } #pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px } #pankuzu ol li:first-child:before { display: none; } #pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; } @media screen and (max-width: 767px) { #pankuzu{ display: none; } #pankuzu ol { margin: 0 6%; } } /*////////////////// Content //////////////////*/ body:not(#index) #main { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f2f9+0,f1f0f6+100 */ background: rgb(230,242,249); /* Old browsers */ background: -moz-linear-gradient(top, rgba(230,242,249,1) 0%, rgba(241,240,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f2f9', endColorstr='#f1f0f6',GradientType=0 ); /* IE6-9 */ position: relative; margin-top: 95px; padding-top: 60px; padding-bottom: 80px; } body:not(#index) #main:before{ content: ""; background: url(../img/common/bg1.svg) repeat-x center center; -webkit-background-size: cover; background-size: cover; width: 100%; height: 90px; position: absolute; top: -90px; left: 0; right: 0; display: block; z-index: -1; } @media screen and (max-width: 1500px){ body:not(#index) #main:before{ height: 68px; top: -68px; } } @media screen and (max-width: 1040px) { body:not(#index) #main { margin-top: 70px; padding-top: 50px; padding-bottom: 60px; } } @media screen and (max-width: 767px) { body:not(#index) #main { margin-top: 50px; padding-top: 40px; padding-bottom: 40px; } body:not(#index) #main:before{ height: 40px; top: -40px; } } @media screen and (max-width: 639px){ body:not(#index) #main:before{ height: 30px; top: -30px; } } /*////////////////// bnrlist //////////////////*/ #bnrlist { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } #bnrlist>li{ width: 33.33%; } #bnrlist>li>a{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: relative; } #bnrlist>li>a .thumb { overflow: hidden; width: 100%; height: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #bnrlist>li>a .thumb img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ transition: 0.5s; backface-visibility: hidden; } #bnrlist>li>a .titlebox{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #bnrlist>li>a .titlebox .title{ font-family: Roboto, 'Roboto', sans-serif; font-size: 3.6rem; color: #fff; line-height: 1.6; } #bnrlist>li>a .titlebox .sub{ background: #fff; padding: 1px 16px; margin-top: 5px; } #bnrlist>li>a:hover .thumb img { transform: scale(1.1); } /*////////////////// Cntside //////////////////*/ #side { } /*////////////////// Footer //////////////////*/ .indexfooter{ margin-top: 120px; } @media screen and (max-width: 1040px){ .indexfooter{ margin-top: 90px; } } .ftxt{ margin-bottom: 10px; text-align: center; } @media screen and (max-width: 767px){ .ftxt{ text-align: left; } } #fcontactbox{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f2f9+0,f1f0f6+100 */ background: rgb(230,242,249); /* Old browsers */ background: -moz-linear-gradient(top, rgba(230,242,249,1) 0%, rgba(241,240,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(230,242,249,1) 0%,rgba(241,240,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f2f9', endColorstr='#f1f0f6',GradientType=0 ); /* IE6-9 */ padding: 90px 0; position: relative; } #fcontactbox .copy{ font-size: 3.2rem; font-weight: bold; text-align: center; line-height: 1.6; margin-bottom: 5px; } #fcontactbox .txt{ font-size: 1.8rem; text-align: center; } #fcontactbox .contactlist{ margin-top: 10px; text-align: center; } #fcontactbox .contactlist>li.tellink:after{ top: 0; } @media screen and (max-width: 1040px){ #fcontactbox{ padding: 60px; } #fcontactbox .copy{ font-size: 2.7rem; } #fcontactbox .txt{ font-size: 1.6rem; } } @media screen and (max-width: 767px){ #fcontactbox{ padding: 30px; } #fcontactbox .copy{ font-size: 2rem; } #fcontactbox .txt{ font-size: 1.4rem; } #fcontactbox .contactlist{ margin-top: 20px; } } #pagetop{ position: fixed; bottom: 40px; right: 40px; z-index: 1000; } #pagetop>a{ background: #fff; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; -webkit-transform:rotate(180deg); transform:rotate(180deg); } #pagetop>a svg{ width: 30px; height: 18px; } #pagetop>a:hover svg{ -webkit-animation: reversearrow 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate; animation: reversearrow 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate; } @keyframes reversearrow { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0.7; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } } @media screen and (max-width: 1040px){ } @media screen and (max-width: 767px){ #pagetop{ bottom: 20px; right: 20px; } #pagetop>a{ width: 60px; height: 60px; } } #footer{ padding: 70px 0px 50px; } #footer .incnt>.inwrap{ display: flex; flex-direction: row; justify-content: space-between; } #footer .logo { line-height: 0; position: relative; z-index: 10000; margin-bottom: 20px; } #footer .logo a{ text-decoration: none; } #footer .logo img { width: 90px; vertical-align: middle; } #footer .logo .cap{ font-size: 1.4rem; display: inline-block; vertical-align: middle; margin-left: 10px; line-height: 1.5; } #footer .footerinfo{ position: relative; } #footer .footerinfo a{ white-space: nowrap; } #footer .footerinfo #cr{ margin-top: 20px; text-align: left; } #footer .snsbtnbox{ display: block; text-align: right; margin-bottom: 20px; margin-left: -10px!important; } #footer .snsbtnbox>li{ display: inline-block; width: 40px; height: 40px; margin-left: 10px!important; } #footer #fnav>ul:not(.snsbtnbox){ margin-left: -20px; } #footer #fnav>ul:not(.snsbtnbox)>li{ margin-left: 20px; display: inline-block; vertical-align: middle; } #footer #fnav>ul:not(.snsbtnbox)>li a{ text-decoration: none; } @media screen and (max-width: 1110px){ #footer #fnav>ul:not(.snsbtnbox)>li a{ font-size: 1.4rem; } } @media screen and (max-width: 1040px){ #footer{ padding: 50px 0px 30px; } #footer .snsbtnbox{ margin-top: 30px; position: absolute; top: 0; bottom: 0; right: 0; margin-top: auto; margin-bottom: auto; display: block; } #footer .incnt>.inwrap{ display: block; } #footer #fnav>ul:not(.snsbtnbox){ display: none; } } @media screen and (max-width: 767px){ #footer{ padding: 40px 0px 20px; } #footer .footerinfo{ text-align: center; } #footer .footerinfo #cr{ margin-top: 10px; } #footer .snsbtnbox{ margin-top: 20px; position: static; text-align: center; } #footer .footerinfo #cr, #footer .logo{ text-align: center; } #footer .logo .cap{ display: block; margin-left: 0; margin-top: 10px; } }