/* =========================================================================================
Home
=========================================================================================*/
#toppage .inner { padding: 170px 0;}
@media only screen and (max-width:768px){
    #toppage .inner { padding: 100px 0;}
}
@media only screen and (max-width:468px){
    #toppage .inner { padding: 80px 0;}
}


#toppage h3 {
    margin-bottom: 20px;
    font-family: "Zen Maru Gothic", serif;
    font-size: clamp(225%, 3vw, 237.5%);
}
#toppage h4.mid1 {
    padding: 15px 30px;
    font-family: "Zen Maru Gothic", serif;
    font-size: clamp(125%, 2.19vw, 150%);
    font-weight: 500;
    color: #fff;
    text-align: center;
    background: #84C95C;
    border-radius: 50px;
}
#toppage h4.mid2 {
    padding: 20px 30px;
    font-family: "Zen Maru Gothic", serif;
    font-size: clamp(125%, 2.19vw, 150%);
    font-weight: 500;
    border-bottom: 1px solid #ddd;
}
#toppage h5 { font-size: clamp(125%, 2.19vw, 150%);}
@media only screen and (max-width:768px){
    #toppage h3 {font-size:225%;}
}



/*========================================================
    Mainimg
========================================================*/
#toppage .mainimg { position:relative; width: 95%; margin-left: 5%;}
#toppage .mainimg .img img {
    height: 500px;
    object-fit: cover;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
#toppage .mainimg .bana { 
    position: absolute; right: 5%; bottom:-50px;
    width: 50%; max-width: 500px;
}
@media only screen and (max-width:768px){
    #toppage .mainimg .img img { height: 400px;}
    #toppage .mainimg .bana { left: 0; right: 0; margin: auto; width: 80%;}
}



/*========================================================
    About
========================================================*/
#toppage .about .inner { position: relative; display: flex; flex-wrap: wrap; gap:100px 60px;}
#toppage .about .inner::before {
    position: absolute; top:80px;  left: -180px;
    display: block; clear: both; content:"";
    width:100%; max-width: 260px; height:auto;
    aspect-ratio: 269 / 268; 
    background:url("../images/top/heart1.png") no-repeat;
    background-size: 100% auto;
}

/* MAINCOME */
#toppage .about .maincome { position: relative; z-index: 9; display: flex; width: 100%;}
#toppage .about .maincome .photo { width: 50%;}
#toppage .about .maincome .comment {
    display: flex; flex-direction: column; gap:60px;
    width: 50%;
}
#toppage .about .maincome h2 small {
    display: block;
    margin-bottom: 40px;
    font-family: "Roboto", sans-serif;
    font-size: clamp(125%, 2.19vw, 150%);
    font-weight: 500;
    color: #FF8633;
}
#toppage .about .maincome h2 b {
    font-family: "Zen Maru Gothic", serif;
    font-size: clamp(150%, 3vw, 237.5%);
    font-weight: 600;
    letter-spacing: 3px;
}

/* SOUDAN and MITUMORI */
#toppage .about .soudan,
#toppage .about .mitumori {
    display: flex; flex-direction: column; gap:40px;
    width:calc(50% - 30px);
}
#toppage .about h5 { color: #84C95C; text-align: center;}
#toppage .about .mitumori img { margin: auto; max-width: 480px;}
#toppage .about .soudan .b_more { margin: auto;}
@media only screen and (max-width:768px){
    #toppage .about .inner { flex-direction: column; padding: 150px 0;}
    #toppage .about .inner::before { top:50px;  left: -30px; width:42%;}
    #toppage .about .maincome { flex-direction: column; gap:60px;}
    #toppage .about .maincome .photo,
    #toppage .about .maincome .comment { width: 100%;}
    #toppage .about .maincome .comment { gap:40px;}
    #toppage .about .maincome h2 { text-align: center;}
    #toppage .about .maincome h2 small { margin-bottom: 20px;}
    #toppage .about .maincome .b_more { margin: auto;}
    #toppage .about .soudan,
    #toppage .about .mitumori { width: 100%;}
}



/*========================================================
    Info
========================================================*/
#toppage .info {
    position: relative;
    background:#ABE3EF url("../images/top/heart.png") no-repeat right 30px;
    border-radius: 80px;
}
#toppage .info::before {
    position: absolute; top:-110px;  left:0;
    display: block; clear: both; content:"";
    width:50%; max-width: 260px; height:auto;
    aspect-ratio: 421 / 180; 
    background:url("../images/top/illust_maincome.png") no-repeat;
    background-size: 100% auto;
}
#toppage .info .inner { padding: 150px 0;}
#toppage .info h3 { margin-bottom: 70px; text-align: center;}
#toppage .info .info_box { display: flex; gap:40px 60px;}
#toppage .info .b_more2.b_o { position: absolute; top: 18px; right: 15px;}

/* BLOG and EVENT */
#toppage .info .blog,
#toppage .info .event {
    position: relative;
    width: calc(100% / 2);
    background: #fff;
    border-radius: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#toppage .info .blog_list,
#toppage .info .event_list {
    display: flex;flex-direction: column; gap:20px;
    padding: 20px 30px;
}
#toppage .info .blog .box a {
    display:flex; flex-direction: row-reverse; gap:30px;
    color: #222;
}
#toppage .info .blog .photo { width: 35%;}
#toppage .info .blog .photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 15px;
}
#toppage .info .blog .comment { width:calc(65% - 30px);}
#toppage .info .blog .day { font-size:75%;}
#toppage .info .blog .mid {
    margin-bottom: 10px;
    font-size: 112.5%;
    font-weight: 500;
    line-height: 130%;
}
#toppage .info .blog .come { font-size: 87.5%; line-height: 150%;}
#toppage .info .blog .mid,
#toppage .info .blog .come {
    width:100%;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#toppage .info .event .photo { float: right; width: 40%; margin-left: 30px;}
#toppage .info .event .comment {}
#toppage .info .event .mid { font-size: 150%; font-weight: 500;}
#toppage .info .event .come_ss { margin-bottom: 20px;}
#toppage .info .event .come { margin-bottom: 20px;}

/* TAKE */
#toppage .info .take { position: relative; margin:80px auto 0; width: 70%; max-width: 640px;}
#toppage .info .take::before,
#toppage .info .take::after {
    position: absolute;
    display: block; clear: both; content:"";
}
#toppage .info .take::before {
    left:-33%; top: 0;
    width:30%; max-width: 306px; height: auto;
    aspect-ratio: 306 / 186;
    background: url("../images/top/illust_info1.png") no-repeat;
    background-size: 100% auto;
}
#toppage .info .take::after {
    right:-35%; bottom: -250px;
    width:35%; max-width: 286px; height: auto;
    aspect-ratio: 286 / 470;
    background: url("../images/top/illust_info2.png") no-repeat;
    background-size: 100% auto;
}
#toppage .info .take .tit {
    margin-bottom: 20px;
    padding-bottom: 20px;
    background: url("../images/top/takecyan_line.png") no-repeat center bottom;
    background-size: 100% auto;
}
#toppage .info .take .come {
    display: flex; flex-wrap: wrap; gap:20px;
}
#toppage .info .take .come p:nth-child(1) { width: calc(100% - 320px);}
@media only screen and (min-width:768px){
    #toppage .info .blog .box a:hover { text-decoration:none;}
    #toppage .info .event .box a:hover { text-decoration:none;}
}
@media only screen and (max-width:968px){
    #toppage .info .info_box { flex-direction: column;}
    #toppage .info .blog,
    #toppage .info .event { width: 100%;}
}
@media only screen and (max-width:768px){
    #toppage .info { background-size:220px auto;}
    #toppage .info .inner { padding:100px 0;}
    #toppage .info .take { width: 80%;}
    #toppage .info .take .come { flex-direction: column;}
    #toppage .info .take .come p:nth-child(1) { width:100%;}
    #toppage .info .take::before { top:-70px; width:45%;}
    #toppage .info .take::after { right:-10%; bottom: -200px; width:40%;}
}



/*========================================================
    Example
========================================================*/
#toppage .example .inner { padding-bottom: 0; width: 100%; max-width: inherit;}
#toppage .example h3 { text-align: center;}
#toppage .example .cate_list {
    display: flex; flex-wrap: wrap; justify-content: center; gap:10px 0;
    margin: auto; padding: 70px 0;
    width: 100%; max-width: 970px;
}
#toppage .example .cate_list li { width: calc(100% / 10); min-width: 70px;}
#toppage .example .cate_list li a {
    display: block;
    padding-top: 65px;
    width:100%; height: auto;
    text-align: center;
    color: #222;
    font-size: 87.5%;
    background-repeat:no-repeat !important;
    background-position: top center !important;
}
#toppage .example .cate_list li.cate1 a { background:url("../images/common/example_icon01.svg");}
#toppage .example .cate_list li.cate2 a { background:url("../images/common/example_icon02.svg");}
#toppage .example .cate_list li.cate3 a { background:url("../images/common/example_icon03.svg");}
#toppage .example .cate_list li.cate4 a { background:url("../images/common/example_icon04.svg");}
#toppage .example .cate_list li.cate5 a { background:url("../images/common/example_icon05.svg");}
#toppage .example .cate_list li.cate6 a { background:url("../images/common/example_icon06.svg");}
#toppage .example .cate_list li.cate7 a { background:url("../images/common/example_icon07.svg");}
#toppage .example .cate_list li.cate8 a { background:url("../images/common/example_icon08.svg");}
#toppage .example .cate_list li.cate9 a { background:url("../images/common/example_icon09.svg");}
#toppage .example .cate_list li.cate10 a { background:url("../images/common/example_icon10.svg");}



#toppage .example .example_list { margin:0 auto; padding: 0; width: 100%; width:400px;}
#toppage .example .example_list .slick-list { overflow:visible;}
#toppage .example .box {
    margin: 10px;
    padding: 20px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#toppage .example .box a { color: #222;}
#toppage .example .box .photo img { aspect-ratio: 6 / 4; object-fit: cover;}
#toppage .example .box .comment { margin: 20px 10px 0;}
#toppage .example .box .mid {
    font-size: 87.5%;
    font-weight: bold;
    display: -webkit-box;             
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
#toppage .example .box .come { font-size: 125%;}
#toppage .example .box .namae { font-size: 87.5%;}
@media only screen and (min-width:768px){
    #toppage .example .cate_list li a:hover { color: #FF8633;}
}
@media only screen and (max-width:768px){
    #toppage .example .cate_list { padding: 35px 0; max-width: 375px;}
    #toppage .example .cate_list li { width: calc(100% / 5);}
}



/*========================================================
    Voice
========================================================*/
#toppage .voice .voice_box {
    position: relative;
    padding: 150px 50px 50px;
    background: url("../images/top/voice_bg.jpg");
    border-radius: 65px;
}
#toppage .voice .voice_box::before,
#toppage .voice .voice_box::after {
    position: absolute;
    display: block; clear: both; content:"";
}
#toppage .voice .voice_box::before {
    right: -7%; top: -100px;
    width:30%; max-width: 333px; height: auto;
    aspect-ratio: 167 / 89;
    background: url("../images/top/illust_voice1.png") no-repeat;
    background-size: 100% auto;
}
#toppage .voice .voice_box::after {
    left: -5%; bottom: -50px;
    width:30%; max-width: 333px; height: auto;
    aspect-ratio: 333 / 256;
    background: url("../images/top/illust_voice2.png") no-repeat;
    background-size: 100% auto;
}
#toppage .voice h3 {
    position: absolute; top: -30px; left: 0; right: 0;
    margin: auto;
    width: 80%;
    text-align: center;
}
#toppage .voice h3 img { margin: auto; max-width: 420px;}
#toppage .voice .voice_list {
    display: flex; gap:15px;
    margin: auto;
    width: 90%; max-width: 990px;
}
#toppage .voice .box {
    position: relative;
    width: calc(100% / 3);
    padding:30px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#toppage .voice .box::before {
    position: absolute; right: 30px; bottom: -33px;
    display: block; clear: both; content:"";
    width: 67px; height: 33px;
    background: url("../images/top/fukidashi.png") no-repeat;
}
#toppage .voice .box a { color: #222;}
#toppage .voice .box .mid { margin-bottom: 10px; font-size:125%; font-weight: 600;}
#toppage .voice .box .namae { margin-bottom: 20px; }
#toppage .voice .box .star img { width: 100%; max-width: 225px; height: auto;}
#toppage .voice .b_more { margin:50px auto 0; width: 230px;}
@media only screen and (min-width:768px){
    #toppage .voice .box a:hover {text-decoration: none;}
}
@media only screen and (max-width:768px){
    #toppage .voice .voice_box { padding: 150px 0 50px;}
    #toppage .voice .box { width: calc(100% / 2);}
    #toppage .voice .box:nth-child(3) { display: none;}
}
@media only screen and (max-width:468px){
    #toppage .voice .inner { width: 100%;}
    #toppage .voice .voice_box { padding: 150px 0 50px;}
    #toppage .voice h3 img { width: 90%;}
    #toppage .voice .voice_list { flex-direction: column; gap:50px;}
    #toppage .voice .box { width:100%;}
    #toppage .voice .box:nth-child(3) { display: none;}
    #toppage .voice .voice_box::before { right: 0;}
    #toppage .voice .voice_box::after { left: 0;}
}



/*========================================================
    Area
========================================================*/
#toppage .area {
    position: relative;
    background: rgba(132,209,225,0.18);
}
#toppage .area .inner {
    display: flex; justify-content: flex-end;
    padding: 100px 0;
    z-index: 9;
}
#toppage .area .comment { max-width:45%; min-width: 300px;}
#toppage .area .map {
    position: absolute; left:-150px; top: -70px;
    width: 100%; max-width: 1400px;
}
#toppage .area .map img { width: 80%; max-width: 980px; height: auto;}
@media only screen and (min-width:768px){
}
@media only screen and (max-width:768px){
    #toppage .area .inner { padding: 250px 0 50px;}
    #toppage .area h3 { text-align: center;}
    #toppage .area .comment { max-width:100%; min-width:100%;}
    #toppage .area .map { margin: auto; top: -50px; left:0; right:0; }
    #toppage .area .map { min-width:468px;}
    #toppage .area .map img { width:100%;}
}
@media only screen and (max-width:468px){
    #toppage .area .inner { padding: 230px 0 50px;}
    #toppage .area .map { width:468px;}
    #toppage .area .map img { 
        position: absolute; left:-130px;
        width:668px;
    }
}