@charset "utf-8";
/* CSS Reset */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0px}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}ul,ol{list-style: none; margin:0px; padding:0px;}section{margin:0px; }
*{box-sizing: border-box;} *::before,*::after{box-sizing:border-box;}

/* base color */
:root{--pink:#fd6c63;--pink02:#e74b35;--blue:#346efd;--bg01:#f2f2f2;--bg02:#fdfafa;--gray:#cccccc;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

html {scroll-behavior: smooth;}

body{font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif; font-size: 17px; line-height: 160%;}

/* firstview */
#firstview{display:flex; justify-content:flex-start; align-items:stretch; flex-wrap: wrap; width: 100%; position: relative; margin: 0 auto; border-bottom: 1px solid var(--gray); max-width: 1920px; }
#firstview .left{width: 50%; height: 100%; display: block; font-weight: bold; background-image: url("../images/bg_triangle.svg"); background-size: 50% auto; background-repeat: no-repeat; background-position: right top; position: relative; padding: 0 40px; }
#firstview .left img{position: absolute; left: calc(50% - 310px); top:calc(42vh - 335px); z-index:1; display: block; width: 620px;}

/* header */
#firstview h1 {margin: 0; display: block; width: 210px; height: auto; overflow: hidden; padding: 20px 0; }
#firstview h1 a {display: block; width: 210px;height: 35px; background: url("../images/logo.gif") no-repeat 0 0; overflow: hidden; text-indent: -5000px;}

/* hgroup */
#firstview hgroup{width: 100%; height: calc(100% - 75px); position: relative; }
#firstview hgroup h2{font-size: 19px; color: var(--pink02); z-index: 2; position: relative; border: 1px solid var(--pink); display: inline-block; padding: 0.4em 1.5em; border-radius: 1.5em; width: 21em; text-align: center; background-color: #fff;}
#firstview hgroup h2::before{ content: '●'; width: 1em; height: 1em; display: inline-block; margin: 0; position: absolute; left: 0.5em; }
#firstview hgroup h2::after{ content: '●'; width: 1em; height: 1em; display: inline-block; margin: 0; position: absolute; right: 0.5em; }
#firstview hgroup p.en{font-size: 19px; width: 21em; margin: 10px 0;}
#firstview hgroup p.en span{display: block;  text-align: center; font-size: 22px; color: var(--gray); z-index: 2; position: relative;}
#firstview hgroup p.leadtext{font-size: 34px; color: #000; z-index: 2; position: relative;  writing-mode: vertical-rl; margin: 40px 50px; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; line-height: 180%; }
#firstview hgroup p.leadtext b{ color: var(--pink02);}

/* navi */
#firstview nav{width: 50%; height: auto; position: relative; line-height: 140%;  }
#firstview nav a{color: #000; text-decoration: none; }
#firstview nav a:hover{color: var(--pink02); box-shadow: 1px 1px 1px #666; top:2px; }
ul.nav{width: 100%; height: 100%; background-color: var(--bg01);}
ul.nav li{width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; padding-left: 40px; position: relative; }
.s01 img{left:40px; top:40px; position: absolute; width: 190px; height: auto; z-index: 1;}
.s02 img{right:40px; top:-20px; position: absolute; width: 190px; height: auto; z-index: 1;}
.s03 img{left:40px; top:80px; position: absolute; width: 190px; height: auto; z-index: 1;}
.s01 a,.s02 a,.s03 a{background-color: #fff; border-radius: 10px; box-shadow: 2px 2px 3px #666; width:380px; max-width: calc(100% - 270px); padding: 20px 10px 20px 70px; font-weight: bold; font-size: 17px; position: relative; }
.s01 a{margin: 20px 0 40px 230px; z-index: 2;}
.s02 a{margin: 40px 0; z-index: 2;}
.s03 a{margin: 40px 0 20px 230px; z-index: 2;}
.s01 a::before,.s02 a::before,.s03 a::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0; bottom: 0;  width:36px; height:100%; background-color: var(--pink02); border-radius: 10px 0 0 10px; }
.s01 a::after,.s02 a::after,.s03 a::after{content: ""; margin: 0; position: absolute; left: 10px; top: calc(50% - 23px); bottom: 0;  width:46px; height:46px; background-color: var(--pink); border-radius: 50%; border: 2px solid #fff; background-image: url("../images/arrow_white.svg"); background-size:27px auto; background-repeat: no-repeat; background-position: center; }
ul.nav li.s01 p{font-size: 44px; color:var(--gray); text-align: right; width: 100%; padding:20px 40px 0px 40px; line-height: 1em; }
ul.nav li.s02{background-color: var(--bg02);}
ul.section03_navi{margin-bottom: 40px; width: 100%; }
.s03_detail{padding-left: 230px!important; width: calc(100% - 230px); }
.s03_detail a{min-width: calc(100% - 40px)!important; width: auto; margin: 4px 0; padding: 7px 20px 7px 30px; display: inline-block; font-weight: normal;}
.s03_detail a::before{content: ""; margin: 0; position: absolute; left: 0; top: 0; bottom: 0;  width:30px; height:100%; background-color: #fff; border: none; background-image: url("../images/arrow_pink.svg"); background-size:14px auto; background-repeat: no-repeat; background-position: center;}
.s03_detail a::after{display: none; }

/* main contents */
main{display: block; margin: 0 auto; width: 100%; overflow: hidden; position: relative; }
.flame{display: block; margin: 0 auto; max-width: 1280px; width: 100%; overflow: hidden; position: relative; padding: 60px 40px 50px 40px; }
main #section02{background-color: var(--bg01);}
main #section01 h2,main #section02 h2,main #section03 h2{font-size: 36px; color: #000; padding: 20px 20px 20px 90px; border-bottom: 5px solid var(--pink02); display: block; position: relative; margin-left: 40px; margin-bottom: 60px; line-height: 120%; }
main #section01 h2::before,main #section02 h2::before,main #section03 h2::before{content: ""; margin: 0; position: absolute; left: -40px; bottom: -20px; width:110px; height:110px; background-color: var(--pink); border-radius: 55px; border: solid 4px #fff; background-size: 60% auto; background-repeat: no-repeat; background-position: center; }
main #section01 h2::before{background-image: url("../images/icon01.svg");}
main #section02 h2::before{background-image: url("../images/icon02.svg");}
main #section03 h2::before{background-image: url("../images/icon03.svg");}
p.moveinfo{margin-top: 20px; padding-left: 24%;}

/*section01*/
p.section01{margin: 0 40px 40px 40px;}
ul.section01{width: 100%; display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap; padding-left: 24%; gap:24px 3%; background-image: url("../images/illust01_sp.webp");
background-image: image-set(url(../images/illust01_pc.webp) 1x, url(../images/illust01_sp.webp) 2x);
background-image: -webkit-image-set(url(../images/illust01_pc.webp) 1x, url(../images/illust01_sp.webp) 2x);
background-size: 22% auto; background-repeat: no-repeat; background-position: left top;  }
ul.section01 li{width: 31%; max-width: 290px; border-radius: 10px; position: relative; z-index: 1; margin:0; border: var(--gray) 1px solid; line-height: 135%; cursor: pointer;}
ul.section01 li img{width: 100%; max-width: 290px; height: auto; border-radius: 10px 10px 0px 0px; position: relative; z-index: 1;}
ul.section01 li p{width: 100%; padding: 10px; border-radius: 0 0 10px 10px; font-weight: bold;}
ul.section01 li:nth-child(6)::before,ul.section01 li:last-child::before{display: none;}
ul.section01 li:nth-child(6){border: none; font-size: 14px; cursor: default;}
ul.section01 li:nth-child(6) p{font-weight:normal; }


/*section02*/
ul.section02{width: 100%; display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap; padding-left: 24%; gap:24px 3%; background-image: url("../images/illust02_sp.webp");
background-image: image-set(url(../images/illust02_pc.webp) 1x, url(../images/illust02_sp.webp) 2x);
background-image: -webkit-image-set(url(../images/illust02_pc.webp) 1x, url(../images/illust02_sp.webp) 2x);
background-size: 22% auto; background-repeat: no-repeat; background-position: left top;}
ul.section02 li{width: 48%; border-radius: 10px; position: relative; z-index: 1; margin:0; padding: 0; border: var(--gray) 1px solid; display:flex; justify-content:flex-start; align-items:center; background-color: #fff;}
ul.section02 li img{width: 140px; height: auto; overflow: hidden; border-radius: 10px 0px 0px 10px; position: relative; z-index: 1; margin: 0; outline:solid #ccc 1px;}
ul.section02 li p{width: calc(100% - 140px); padding: 10px 15px; border-radius: 0 0 10px 10px; font-weight: bold; margin: 0; line-height: 135%;}
ul.section02 li p span.info{font-size: 13px; font-weight: normal; display: block; line-height: 130%; margin-top: 10px;}
ul.section02 li p a{text-decoration: none; color: #000;}
ul.section02 li p a span.btn{border: 1px solid var(--gray); border-radius: 1em; padding: 0.2em 1em; display: inline-block; line-height: 1em; margin-top: 10px; }
ul.section02 li:nth-child(6){border: none; background-color: var(--bg01);}
main #section02 article,article.greeting{border-radius: 10px; background-color: #fff; padding: 30px; margin-top: 40px;}
main #section02 article h3,article.greeting h4{line-height: 1em; font-weight: bold; font-size:30px; margin-bottom: 20px;}
main #section02 article ol{margin: 20px 0; padding: 0;}
main #section02 article ol li{position: relative; padding-left: 1.5em;  z-index: 1;}
main #section02 article ol li:nth-child(1)::before{content: "①"; margin: 0; position: absolute; left: 0px; top: 0; width:1em; height:1em; }
main #section02 article ol li:nth-child(2){margin: 20px 0 0 0;}
main #section02 article ol li:nth-child(2)::before{content: "②"; margin: 0; position: absolute; left: 0px; top: 0; width:1em; height:1em; }
img.greeting{width: 300px; height: auto; float: right; z-index: 2; position: relative; max-width: 90%; }
img.greeting02{width: 180px; height: auto; z-index: 2; position: relative; border: 1px solid var(--gray); float: right; margin-right: 40px;}
img.greeting.winopen{cursor: pointer;}

/*section03*/
#section03 article.section03{width: 100%; padding-left: 24%; background-image: url("../images/illust03_sp.webp");
background-image: image-set(url(../images/illust03_pc.webp) 1x, url(../images/illust03_sp.webp) 2x);
background-image: -webkit-image-set(url(../images/illust03_pc.webp) 1x, url(../images/illust03_sp.webp) 2x);
background-size: 22% auto; background-repeat: no-repeat; background-position: left top;}
#section03 h3{font-size: 30px; color:var(--pink02); position: relative; padding-left: 1.5em; line-height: 120%; }
#section03 h3::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0; width:1em; height:1em; background-image: url("../images/section03_h3.svg"); background-size: 1em auto; background-repeat: no-repeat; background-position: center; }
ul.section03{width: 100%; display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap; margin: 30px 0 10px 0;}
ul.section03 li{width: 33%; position: relative; margin:0; padding: 0;}
ul.section03 li img{width: 140px; height: auto; position: relative; margin: 0 auto; outline:solid #ccc 1px;}
ul.section03 li p{padding: 10px 15px; font-weight: bold; margin: 0; line-height: 135%; text-align: center;}
ul.section03 li p span.info{font-size: 13px; font-weight: normal; display: block; line-height: 130%; margin-top: 10px;}
ul.section03 li a{text-decoration: none;}
p.section03_link{margin-bottom: 60px;}
#section03 article.greeting{background-color: var(--bg02); overflow: hidden; border: solid 1px var(--gray);}

/*contact*/
#contact{background-color: #e8e4e6; font-family: var(--bs-font-sans-serif); font-size: 16px;}
#contact h2{font-size: 29px; text-align: center; width: 100%; margin: 15px 0;}
#contact .flame{display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap;}
#contact article{background-color: #fff; border-radius: 5px; padding: 15px; width: 49%;}
#contact article h3{font-size: 25px; margin-bottom: 10px;}
#contact img{width: 53px; height: 30px;}
#contact .freedial{display:flex; justify-content:flex-start; align-items:flex-start; font-size: 40px; font-weight: bold; margin: 10px 0; gap:10px;}
#contact .tel{display: block; font-weight: bold;}
#contact .tel span{font-size: 28px; margin-left: 5px; }
#contact article a.mailbtn{background-color: #0d6efd; color: #fff; text-decoration: none; padding: 5px 15px; border-radius: 5px; display: inline-block; margin-top: 20px;}
#contact article a.mailbtn:hover{background-color: #0b5ed7;}
#contact a{color:#0d6efd;}
footer{color:#6c757d; text-align: center; background-color: #e8e4e6; padding: 50px 0; font-family: var(--bs-font-sans-serif); font-size: 16px; }

/*movie*/
#movie01,#movie02,#movie03,#movie04,#movie05,#greeting_win{position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; text-align: left; padding: 0; margin: 0; overflow-y: auto; overflow-x: hidden; width: 100%; height: 100dvh; z-index: 20; background-color: rgba(255,255,255,0.8);}
.non_visible{display: none;}
.moviewin{width: 70%; margin: auto 15%; }
.visiblemovie{display: flex; animation-name:visiblemovie; animation-duration:0.9s; animation-fill-mode:forwards; opacity:0;}
@keyframes visiblemovie{from {opacity: 0;} to {opacity: 1;}}
.movieclose{border: 2px solid #fff; background: var(--pink02); padding: 0; position: fixed; right: 30px;	top: 10px; color: #fff;	cursor: pointer; opacity: 1; width: 54px; height: 54px; border-radius: 50%;	-webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; caret-color: transparent;}
.movieclose:before,.movieclose:after {display: block;	content: " "; position: absolute; top: 14px; left: 23px; width: 4px; height: 22px; border-radius: 4px; background: #fff;
	-webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; }
.movieclose:before {transform: rotate(-45deg);}
.movieclose:after {transform: rotate(45deg);}
#greeting_win div.flex{display:flex; justify-content:center; align-items:center; width: 100%; height: 100%;}
#greeting_win div.flex img{height: auto; width: 900px; max-width: 80%;}

@media screen and (max-width:1279px){
#firstview .left img{position: absolute; left: 5%; top: 5vw; z-index:1; display: block; width:90%;} 
#firstview hgroup p.leadtext{writing-mode:horizontal-tb; margin: 13em 0px 0px 0px; display: block; }
#firstview hgroup p.leadtext span{display: none;}

ul.nav li a br{display: none;}
.s01 img{left:20px; width: 30%;}
.s02 img{right:20px; width: 30%;}
.s03 img{top:-20px; left:20px; width: 30%;}
.s01 a,.s02 a,.s03 a{width:60%; max-width: calc(100% - 30% - 20px);}
.s01 a{margin: 20px 0 40px calc(30% + 20px); }
.s02 a{margin: 40px 0; }
.s03 a{margin: 40px 0 20px calc(30% + 20px);} 
.s03_detail{padding-left: 0!important; }
.s03_detail a{min-width: calc(100% - 20px)!important; margin: 4px 0; padding: 7px 20px 7px 30px;}
}

@media screen and (max-width:1024px){
#firstview{display:block;}
#firstview hgroup h2,#firstview hgroup p.en{font-size: 17px; width: 100%; margin: 10px 0;}
#firstview .left,#firstview nav{width: 100%; height: auto; min-height: auto;}
#firstview .left img{position: relative; width: 76%; left:0; top:-50px; margin: 0 auto;}
#firstview hgroup p.leadtext{font-size: 5vw; margin: 0px auto; display: block; text-align: center;}
ul.nav li.s01 p{font-size: 5vw; padding:0px 0px 20px 0px;}  
ul.nav li{width: 100%; height: auto; padding: 20px;}
.s01 img,.s02 img,.s03 img{width: 190px; max-width: 190px;}
.s01 a,.s02 a,.s03 a{width:calc(100% - 230px); max-width: calc(100% - 230px);}
.s01 a{margin: 20px 0 20px 230px; }
.s02 a{margin: 20px 0; }
.s03 a{margin: 20px 0 0 230px;}
ul.section03_navi{margin-bottom: 0px; margin-top: 0;}
.s03_detail{padding: 0!important; width:calc(100% - 160px)!important; margin: 10px 0 10px 180px;}
.s03_detail a{margin: 0;}
p.moveinfo{margin-top: 20px; padding-left: 0;}

/*section01*/
ul.section01{ padding-left: 0; background-image: none; justify-content:center;}
ul.section01 li{width: 30%;}
/*section02*/
ul.section02{ padding-left: 0; background-image:none; justify-content:center;}
ul.section02 li{width: 47%;}
/*section03*/
#section03 article.section03{padding-left: 0; background-image:none;}
ul.section03 li p br{display:none;}
    
#contact .freedial{font-size: 34px;}
#contact .tel span{font-size: 24px;}
    
img.greeting{width: 300px; height: auto; float: none; margin: 0 auto 20px auto; }
img.greeting02{width: 180px; height: auto; float: none; margin: 0 auto 40px auto; }
}

@media screen and (max-width:740px){
.s01 img,.s02 img,.s03 img{width: 170px; max-width: 170px;}
.s01 a,.s02 a,.s03 a{width:calc(100% - 250px); max-width: calc(100% - 250px);}
.s01 a{margin: 20px 0 20px 250px; }
.s02 a{margin: 20px 0; }
.s03 a{margin: 20px 0 0 250px;}
.s03_detail{ width:100%!important; margin: 10px 0 10px 10px;}
.s03_detail a{margin: 0;}

.flame{padding: 40px 20px 50px 20px; }
main #section01 h2,main #section02 h2,main #section03 h2{font-size: 28px; padding: 20px 20px 10px 70px;}
main #section01 h2::before,main #section02 h2::before,main #section03 h2::before{left: -40px; bottom: -20px; width:90px; height:90px;}
p.section01{margin: 0 20px 40px 20px;}
ul.section01 li{width: 46%;}
ul.section02 li{width: 96%;}
    
#section03 h3,main #section02 article h3,article.greeting h4{font-size: 26px;}
    
#contact h2{font-size: 26px;}
#contact .flame{display:block;}
#contact article{width: 100%; margin-bottom: 2px;}
#contact article h3{font-size: 23px;}
  
}

@media screen and (max-width:600px){
#firstview .left{ padding: 0 20px;}
#firstview hgroup h2{font-size: 4vw;}
#firstview hgroup p.en span{font-size: 4vw; margin: 10px 0; }
#firstview hgroup p.leadtext{font-size: 6vw; }
#firstview .left img{width: 96%; max-width: 376px;}
ul.nav li.s01 p{font-size: 7vw;}
ul.nav li{padding:20px;}
.s01 img,.s02 img,.s03 img{width: 170px; max-width: 170px; margin: 0 auto; position: relative; top:0; bottom: 0; left: 0; right: 0;}
.s01 a,.s02 a,.s03 a{width:100%; max-width:100%; margin: 5px 0; font-size: 13px; line-height: 130%; }
.s03_detail{margin: 0;}
    
main #section01 h2,main #section02 h2,main #section03 h2{font-size: 24px; padding: 100px 0 10px 0; margin: 0 0 60px 0;} 
main #section01 h2::before,main #section02 h2::before,main #section03 h2::before{left: calc(50% - 40px); top:0px; bottom: auto; width:80px; height:80px;}
p.section01{margin: 0 0 40px 0;}
ul.section01 li{width: 290px;}
ul.section01 li p{font-size: 15px;}
ul.section02 li{width:100%;}

ul.section03{gap:24px 0; justify-content:center;}
ul.section03 li{width: 50%; position: relative; margin:0; padding: 0;}
#section03 h3,#contact h2,main #section02 article h3,article.greeting h4{font-size: 22px;}
#contact article h3{font-size: 18px;}
#contact .freedial{font-size: 30px;}
}

@media screen and (max-height:440px){#contact .freedial{font-size: 26px;}}
@media screen and (orientation: portrait) {.moviewin{width: 90%; margin: auto 5%; } img.greeting{width: 300px; max-width:50%;} #greeting_win div.flex img{width: 86%; max-width: 86%;}  }