/*
Theme Name: ひまわり育児室 Thema
Theme URI: http://www
Description:
Version: 1.0
Author:
Author URI: http://
*/

/******************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    position: relative;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/******************************************/



body{
    width: 100%;
    margin: 0 auto;
    line-height: 1.8;
    color: #666666;
    font-family: 'Noto Sans JP', sans-serif;
    max-width: 1280px;
    overflow-x: hidden;
}

#wrap{
    clear: both;
    margin: 0 auto;
    max-width: 1280px;
    min-width: 1080px;position: relative;}

/***  header
*****************************************/

header{
    height: 200px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

header h1{
    text-align: center;
}
.hd_tel_box{
    text-align: center;
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 26px;
    line-height: 1;
    background-image: url(images/icon_tel_k.svg);
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 30px
}
.hd_tel_box a{
    text-decoration: none;
    color: #000;
}

.hd_tel_box img{float: left;}

.hd_tel_box span{
    font-size: 9px;
    margin-left: -30px;
}

header nav{
    width:100%;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
    margin-right: 14px;
}

/***  header navigation
*****************************************/
nav ul {
    width: 1050px;
    margin: 0 auto;
     background-image: url(images/v_line.svg);
    background-position: right;
    background-repeat: no-repeat;
}
nav ul li {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    text-align: center;

    background-image: url(images/v_line.svg);
    background-position: left;
    background-repeat: no-repeat;
    width: 202px;
}

nav ul li img{
    vertical-align: middle;
    display: block;
    margin: 0 auto
}
nav ul li a{
    font-size: 12px;
    color: #3f3f3f;
    text-decoration: none;
}
nav ul li a:hover{
    text-decoration:underline;
}



/***  main visual
*****************************************/


 .swiper-container {
      /*width: 100%;
      height: auto;*/
    }
.swiper-slide{
}

#main{
    clear: both;
}
.main_slide{position: relative;    width: 1280px;
margin: 0 auto;}

    /*.main_slide
    width: 1280px;
    height: 620px;
    position: relative;
    overflow: hidden;*/
.swiper-container .swiper-slide img {
    max-width: 100%;
    height: auto;
}
.swiper-button-next, .swiper-button-prev {
    top: 54% !important;    width:45px !important; }

.swiper-button-prev {

    background-size: contain !important;
    background-image: url(images/ar_left.svg)  !important;
    margin-left: 23%;
}
.swiper-button-next {
    background-size: contain !important;
    background-image: url(images/ar_right.svg)  !important;
    margin-right: 23%;
}

.swiper-pagination{
    width: 50%;
   bottom: 0;
    left: 25%;
}
.swiper-pagination-bullet {
    margin: 4px;
}
.swiper-pagination-bullet-active {
    background: #f3a500 !important;}

.delay{
          -webkit-animation-duration: 1s;
  animation-delay:1s;
}
.animated.fadeIn{
    animation-timing-function:ease;
animation-duration: 3.5s;}

/***  TOP contents
*****************************************/

.main_title{
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 28px;
}


.c_box{
    width:100%;
    max-width: 1400px;
    display: inline-flex;
    background-image: url(images/line_or.svg);
    background-repeat: no-repeat;
    background-position: bottom;
}

.lines{
    height: 15px;
    width: 100%;
background-image: url(images/line_or.svg);
    background-repeat: no-repeat;
    background-position: bottom;
}

.left_box{
    width: 30%;
    height: 300px;
    max-width: 400px;
    display: inline-block;
    background-image: url(images/top_left.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.right_box{
    width: 30%;
    height: 300px;
     max-width: 400px;
    display: inline-block;
    background-image: url(images/top_right.svg);
      background-size: contain;
    background-repeat: no-repeat;
}

.center_box{
     height: 300px;
    display: inline-block;
    max-width: 500px;
    text-align: center;
    align-self: center;
    font-size: 14px;
}




.box{
    display: block;
    margin: 65px auto;
    width: 980px;
    font-size: 0;
    vertical-align: top;
}

.title_box{
    width: 50%;
    display: inline-block;
    font-size: 14px;
    height: 138px;
}
.txt_box{
    width:50%;
    float: right;
    font-size: 16px;
    height: 138px;
}

.box:after {
    visibility:hidden;
    height:0;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
}

#news{width: 40%;
    min-width: 300px;
    margin: 32px auto;
    padding-top: 16px;
    padding-bottom: 32px;
background-color: #fdf1d8;
    border-style: dashed;
    border-color: #ffce68;
    border-width: 2px;
}

@media screen and (max-width: 640px){
    #news{width: 100%;
    min-width: 300px;
    margin: 0 auto 32px;
        padding-bottom: 16px;}
}
#news a{color: #333;}
#news a:visited{color: #333;}

ul.top_news{
    width: 100%;
    margin:0 auto 40px;
    list-style-position: inside;
    padding: 8px;
}
ul.top_news li{margin: 4px;}

.topics{margin-top:12px;padding: 3px 0;}
.topics a{background: #fbe2aa;text-decoration: none;padding:3px 10px 1px;display: inline-block;border-bottom: 2px dashed orange;}

@media screen and (max-width: 640px){
    .topics{margin-top:24px;}
    ul.top_news li{font-size: 13px;}

}

.news_hd{background-image: url(images/page_hd_page.png);background-repeat: no-repeat;}
.news_hd img{border-radius: 16px 56px 16px;}

@media screen and (max-width: 640px){
    .news_hd{
    background-position: left bottom;
    background-size: 100%;
    padding-bottom: 50px;
    }
    .news_hd h2{margin-bottom: 30px;padding-left: 30px;padding-right: 30px;}
    .news_hd img{border-radius:32px;}
}


.news_line_or{background-image: url(images/line_or.svg);
    background-repeat: no-repeat;
    background-position: left 0 bottom 10%;}

@media screen and (max-width: 640px){
    .news_line_or{background-size: 100%;
    background-position: left 0 bottom 15%;}
}

table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}
th{background-color:#6bcb66;
color: #FFF;}
td,th{padding: 4px;
    border-bottom: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
}
td:last-child,th:last-child{
    border-right: none;
}

tr:nth-child(even){
    background-color:#f5f5f5 ;
}

.box3 img.b3{width: 100%;}


/*** HOIKU
*****************************************/

.line_or{
    background-image: url(images/line_or.svg);
    background-repeat: no-repeat;
    background-position:left 0 top 65%;
}

.hoiku{
    background-image: url(images/bg_or_wave2.gif);
    /*background-size:contain;*/
    background-repeat: repeat-x;
    background-position:top center;
    padding: 48px 0;
}

.hoiku h3{text-align: center;color: #f3a500;}

h4.or{
    background: #f3a500;
    margin: 32px 0;
    padding: 8px;
    color: #FFF;
}

section.class{
    width: 960px;
    margin: 0 auto;
    padding-top: 64px;
}

section.class th{background-color:#808080;
color: #FFF;font-size: 22px;
position: relative;}

section.class th span{
    font-size: 11px;
    position: absolute;
    right: 0;
    bottom: 4px;
    padding-top: 16px;
}

section.class table{
    font-size: 14px;
}


section.class .box_mini{
    margin: 10px auto 10px;
        width:100%;
}

.calender a{
    padding: 16px 80px;
    background: #f3a500;
    display: inline-block;
    text-align: center;
    color: #FFF;
    margin: 32px 0;
    text-decoration: none;
}

.calender a:hover{
    background-color:#ffce68;
}
h3.mo{
    color: #696969 !important;
}

.mo_boxs{
    display: inline-flex;
    margin-bottom: 24px;
}
.mo_box img{width:49%;/*margin-top: 80px*/;}

.mo_box {
    padding:1%;
    text-align: center;
    font-size: 13px;
}
table.mod{border: 1px solid #dcdcdc !important;
margin-top: 24px;}
table.mod th{background-color:#808080;
color: #FFF;font-size: 18px;}
table.mod td,table.mod th{
    border: 1px solid #dcdcdc !important;}

table.mod2{border: 1px solid #dcdcdc !important;
margin-top: 24px;}
table.mod2 th{background-color:#808080;
color: #FFF;}
table.mod2 td,table.mod th{font-size: 14px;
    border: 1px solid #dcdcdc !important;}

/** comm
***********************/

.comm{
    background-image: url(images/bg_comm.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size:;
    padding: 40px 0;

}
p.f_btn a{
    color: #f3a500;
    background-color: #FFF;
    padding:8px 64px;
    margin: 40px 0;
    display: inline-block;
    background-image: url(images/btn_bg_arr.svg);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
}
p.f_btn a:hover{
    color: #FFF;
    background-color: #ffce68;
    background-image: none;
}
.sub_tit{
    margin-top: 32px;
    font-size: 26px;
    letter-spacing: 2px;
    color: #FFF;
}
.comm h4{
  color: #FFF;
    text-align: left;
    font-size: 37px;
    line-height: 1;
    margin-bottom: 16px;
}

.comm p{
    font-size: 14px;
    color: #FFF;
}

.comm .box_mini_in{
    width: 48%;
    padding:1.5% 0.5%;
    display: inline-block;
    vertical-align:top;
}
/*** Access
*****************************************/

.line_bl{
    background-image: url(images/line_bl.svg);
    background-repeat: no-repeat;
    background-position:left 0 top 65%;
}

.facility{
    width: 960px;
    margin: 64px auto;
}

.facility table{
    text-align: left;
    width: 100%;
}
.facility table tr{    background-color: #FFF!important;
border: none;}
.facility table td{
    padding:16px 32px 16px 0;
    border: none;
    min-width: 30%;
}
.f_image img{
    width: 100%;
}

.facility h4{
    text-align: left;
}

.facility .box_mini{
    width: 100%;
}

.box_mini_in.map{
    width: 66%;
}
.line_d{
    border-top: 1px #CCC dotted;
    padding-top: 30px;
}
.map_link{
    margin-top: 40px;
}
.facility .box_mini img{
    max-width: 100%;
}



/*** HOW TO USE
*****************************************/

.line_gr{
    background-image: url(images/line_gr.svg);
    background-repeat: no-repeat;
    background-position:left 0 top 65%;
}

.att{font-size: 10px;}

h3{
    font-size:28px;
}
h3 span{font-size: 18px;}

p{font-size: 16px;}

ul.att li{
    list-style-position:;
      margin-left: 18px;
}

/*** FLOW
***********************/

section.flow{
    background: #6bcb66;
    display: block;
    width: 100%;
    padding: 48px 0;
}
section.flow h3{
    text-align: center;
        color: #FFF;
}

h4{font-size: 19px;text-align: center;}
.step{
    width: 186px;
    height: 140px;
    display: inline-block;
    vertical-align: top;
    background-repeat: no-repeat;
    padding-left: 37px;
    padding-right: 17px;
    padding-top: 170px;
    margin-right:6px;
    padding-bottom: 4px
}
.step:last-child{
    margin-right: 0;
}
.step p{
    font-size: 13px;
}
.s01{
    background-image: url(images/bg_step1.svg);
}
.s02{
    background-image: url(images/bg_step2.svg);
}
.s03{
    background-image: url(images/bg_step3.svg);
}
.s04{
    background-image: url(images/bg_step4.svg);
}
.mb10{
    margin-bottom: 10px !important;
}

.box_0{
    margin: 10px auto 10px;
        width: 980px;
}

.box_mini{
    margin: 10px auto 10px;
        width: 840px;
}

.box_mini_in{
    width: 46%;
    padding: 1.5%;
    display: inline-block;
    vertical-align:top;
    position: relative;
}
.box_mini_in img{
    width: 100%;
}

.box_mini_in .mini_txt{
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    font-size: 14px;
    padding: 10% 8% 12% 12%;
}
.box_mini_in .link{
    position: absolute;
    bottom: 8%;
    font-size: 14px;
    right: 8%;}

.box_mini_in .link a{
    color:#F3A500 ;
}

section.flow ul.att{
    color: #FFF;
    list-style: none;
}

.box_0 a{    text-decoration: none !important;}
a .dl_btn{
    width: 644px;
    border: 2px solid #FFF;
    margin: 40px auto;
    padding: 8px 0;
    text-align: center;
    color: #FFF;
}

.dl_btn img{vertical-align: middle;}


.box3{
    width: 29.333%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    padding: 0.5%;
}
.box3:nth-child(2){
    margin: 0 3%;
}

.kakunin{
    padding: 48px 0;
}
.box3 p ,.box_mini p{
    font-size: 14px;
}
.box3 h4{
    font-size: 22px;
    margin-bottom: 16px;
}
.box3 ul{    margin-left: 18px;}

/*** contact
*****************************************/

p.lage{font-size: 18px;}

.faq_tit{margin-top: 32px;}
dl.faq{font-size: 18px;}
dl.faq dt{
    margin-bottom: 16px;
}
dl.faq dd{
    margin-bottom: 32px;
    padding-left: 16px;
}

/*** history
***************************/
.bgg{background: #edf5ed;}
.cd-timeline__content img{
    height: 90px;
    margin: 3px;
}

/*** horizontal image
*****************************************/

.imges3{
    width: 100%;
    overflow: hidden;
    display: block;
    max-height: 270px;
    font-size: 0;
    text-align: center;
}

.imges3 img{
    width:  33.333333333%;
    height: auto;
    display: inline-block;
}


/*** Link btn
*****************************************/

.btn{
    display: block;
    position: relative;
     /*padding-bottom: 62px;*/
}

.btn_link{
    width: 872px;
    margin: 85px auto 125px;
    display: block;
    font-size: 0;
}

.btn_link li{
    width: 400px;
    height: 85px;
    margin: 0 18px;
    list-style: none;
        display: inline-block;
}

.btn_link li:nth-child(3),.btn_link li:nth-child(4)
{margin: 16px 18px 0;}

.btn_link li a{

}

/**
CSS A
********************************/

.preserve-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.button_base {
    margin: 0;
    border: 0;
    font-size: 18px;
    position: relative;
    top: 0;
    left: 0;
    margin-top: -25px;
    margin-left: 0px;
    width: 400px;
    height: 86px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}

.button_base:hover {
    cursor: pointer;
}

/* ### ### ### 03 */
.b03_skewed_slide_in {
    overflow: hidden;
    border: #f3a500 solid 1px;
}

.b03_skewed_slide_in div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 86px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b03_skewed_slide_in div:nth-child(1) {
    color: #f3a500;
    background-color: #ffffff;
}

.b03_skewed_slide_in div:nth-child(2) {
    background-color: #f3a500;
    width: 450px;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: translate(-480px, 0px) skewX(-30deg);
    -webkit-transform: translate(-480px, 0px) skewX(-30deg);
    -moz-transform: translate(-480px, 0px) skewX(-30deg);
}

.b03_skewed_slide_in div:nth-child(3) {
    color: #ffffff;
    left: -450px;
    transition: left 0.2s ease;
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
}

.b03_skewed_slide_in:hover div:nth-child(2) {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transform: translate(-15px, 0px) skewX(-30deg);
    -webkit-transform: translate(-15px, 0px) skewX(-30deg);
    -moz-transform: translate(-15px, 0px) skewX(-30deg);
}

.b03_skewed_slide_in:hover div:nth-child(3) {
    left: 0px;
    transition: left 0.30000000000000004s ease;
    -webkit-transition: left 0.30000000000000004s ease;
    -moz-transition: left 0.30000000000000004s ease;
}



/************************************************************/



#totop{
position: absolute;
    right: 14px;
    bottom: 280px;
}

footer{
    padding-top: 138px;
    background-image: url(images/bg_footer.jpg);
    background-position: top center;
    background-size: auto;
    background-repeat: repeat-x;
    width: 100%;
}

footer.top{
    background-image: none;
    padding-top: 0px;
}

.footer{
    width:100%;
    max-width: 1080px;
    margin: 0 auto;
}

.ft_left{
    width:450px;
    font-size: 15px;
    margin-bottom: 8px;
    float: left;
}
.ft_left img{
    float: left;
    margin-bottom: 32px;
}
.ft_left span{
    font-size: 12px;
}

footer nav{
    width: 560px;
    float: right;
}

footer nav ul{
    width: 564px;
    background: none;
}
footer nav ul li {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    padding: 0;
    width: auto;
    background: none;
}

footer nav ul li img{
    vertical-align: middle;
    display: inherit;
}
footer nav ul li a{
    font-size: 12px;
    color: #3f3f3f;
    text-decoration: none;
}
footer nav ul li a:hover{
    text-decoration:underline;
}




.copy{
    clear: both;
    font-size: 9px;
    text-align: right;
    /*margin-right: 30px;*/
}


.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}

.sponly{
        display:none;
        }
    .pconly{
        display:initial;
        }