@charset "utf-8";

  .zoom-in-img img {
    width: 100%;
    height: 90%;
  }
  /*ホバーエフェクト*/
  .zoom-in-img img {
    transform: scale(1);
    transition: .3s ease-in-out;
  }
  .zoom-in-img:hover img {
    transform: scale(1.2);
  }
  .d_zoom-in-img img {
    width: 60%;
    height: 90%;
  }
  /*ホバーエフェクト*/
  .d_zoom-in-img img {
    transform: scale(1);
    transition: .3s ease-in-out;
  }
  .d_zoom-in-img:hover img {
    transform: scale(1.2);
  }

.img01{
    width:90%;
    height: auto ;
    vertical-align: middle;
    margin:5px 5%;
}


h2{
    margin:8px;
}

#child1 {
    background-color: rgb(255, 255, 255);
    flex-grow: 1;
}
#child2 {
    background-color: rgb(255, 255, 255);
    flex-grow: 1;
}
#child3 {
    background-color: rgb(255, 255, 255);
    flex-grow: 1;
    min-width:250px;
    margin:0 0 30px 0;
}

/* 研修会表示 */
.section{
    height:350px;
    overflow:auto;
    background-color: #8a90a3;
}

.box11{
    padding: 0.5em 1em;
    width:85%;
    margin: 2em auto;
    color: #5d627b;
    background: white;
    border-top: solid 7px #76d61d;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    display:flex;
}
.box11 p {
    margin: 0;
    padding: 0;
}

.work_i{
    width:80px;
}
.work_t{
    width: 90%;
    margin:0 0 0 10px;
}

.dinfo{
    overflow-y: auto;
    border-radius: 10px;
    padding: 5px;
    margin:10px auto;
}
.dinfo p{
    margin:5px auto 0 auto;
    width: 95%;
    height: 30px;
    line-height: 30px;
    background-color: #386717;
    color: #ffffff;
    overflow: hidden;
}

/* //////////////////////////スマホ/////////////////////// */
@media screen and (max-width: 800px) {
    .zoom-in-img {
        max-width: 150px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .suggestion_img{
        width:150px;
        margin:10px 0 10px 5%;
    }
    .suggestion_img img{
        width:90px;
        margin:10px 0 10px 5%;
    }

    .d_zoom-in-img {
        max-width: 110px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .descussion_img{
        width:100px;
        margin:10px 0 10px 5%;
    }
    .img10{
        width:100px;
        margin:10px 0 10px 6%;
    }
    .centre01{
        width:90%;
        margin:10px auto;
        position: relative;
    }
    .Top_content{
        display:block;
        margin:0 5%;
    }
    .Top_content2{
        display:block;
        margin:0 5%;
    }
    .img_tex{
        position: absolute;
        top:70%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:35px;
        font-weight:bold;
        color: rgb(255, 255, 255);
        padding:0;
        margin:0;
    }
    .section_1{
        display:none;
        font-size:0.9rem;
    }
    .section_2{
        background-color: #e7e7e7;
        height:120px;
        overflow:auto;
        margin:0 0 15px 0;
        width:95%;
        margin:auto;
    }
    .section_2 li{
        font-size: 0.7rem;
    }
    .boxcate{
        font-size: 0.6rem;
        width:35%;
    }
    small{
        font-size:0.7em;
    }
    #child4 {
        background-color: rgb(255, 255, 255);
        flex-grow: 1;
        width:100%;
    }

    .boxtitl{
        font-size:1rem;
    }
    .boxdate{
        font-size:0.6rem;
    }
    .boxbody{
        font-size: 0.7rem;
    }
    .sample02 {
        margin : 0 auto;
        width : 100%;
        font-size : 24px;
        text-align : center;
        overflow : hidden;
        }
        .sample02 ul{
        margin:0;
        display : inline-block;
        padding-left: 100%;
        white-space : nowrap;
        line-height : 1em;
        animation : scrollSample02 25s linear infinite;
        }
        .sample02 ul li{
        display:inline;
        margin:0 100px 0 0;
        }

        @keyframes scrollSample02{
        0% { transform: translateX(0)}
        100% { transform: translateX(-100%)}
        }
        .pop {
            cursor: pointer;
            font-size: 1rem;
            text-align: center;
            color:rgb(255, 0, 0);
        }
        .description {
            text-align: center;
            width: 95%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            padding: 0 10px;
            margin:5px auto ;
        }
        .today{
            font-weight:bold;
            color:rgb(255, 0, 0);
            font-size: 12px;
        }
        .tomorrow{
            color:rgb(0, 0, 0);
            font-size: 12px;
        }
    .postj{
        display:none;
    }
    td{
        font-size: 0.6rem;
    }
    th{
        font-size: 0.7rem;
    }
}
/* //////////////////////////タブレット/////////////////////// */
@media screen and (min-width: 801px) and (max-width: 1438px) {
    .zoom-in-img {
        max-width: 200px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .suggestion_img{
        width:200px;
        margin:10px 0 10px 5%;
    }
    .suggestion_img img{
        width:120px;
        margin:10px 0 10px 5%;
    }
    .d_zoom-in-img {
        max-width: 150px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .descussion_img{
        width:100px;
        margin:10px 0 10px 5%;
    }
    .img10{
        width:100px;
        margin:10px 0 10px 6%;
    }

    .centre01{
        width:60%;
        margin:10px auto;
        position: relative;
    }
    .Top_content{
        display:block;
        margin:0 5%;
    }
    .Top_content2{
        display:block;
        margin:0 5%;
    }
    .titl{
        text-align: center;
    }
    .img_tex{
        position: absolute;
        top:70%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:50px;
        font-weight:bold;
        color: rgb(255, 255, 255);
        padding:0;
        margin:0;
    }
    #child4 {
        background-color: rgb(255, 255, 255);
        flex-grow: 1;
        max-width:650px;
        min-width: 250px;
    }
    #parent {
        display: flex;
        clear: both;
    }

    #parent01 {
        display: flex;
        clear: both;
        margin:0% 3%;
    }
    .section_1{
        height:150px;
        overflow:auto;
    }

    .section_2{
        display:none;
    }
    .boxcate{
        font-size: 0.7rem;
        width:50%;
    }

    .boxtitl{
        font-size:1rem;
    }
    .boxdate{
        font-size:0.7rem;
    }
    .boxbody{
        font-size: 0.8rem;
    }
    .sample02 {
        margin : 5 auto;
        width : 100%;
        font-size : 24px;
        text-align : center;
        overflow : hidden;
        }
        .sample02 ul{
        margin:0;
        display : inline-block;
        padding-left: 100%;
        white-space : nowrap;
        line-height : 1em;
        animation : scrollSample02 25s linear infinite;
        }
        .sample02 ul li{
        display:inline;
        margin:0 100px 0 0;
        }

        @keyframes scrollSample02{
        0% { transform: translateX(0)}
        100% { transform: translateX(-100%)}
        }
        .today{
            font-weight:bold;
            color:rgb(255, 0, 0);
            font-size: 18px;
        }
        .tomorrow{
            color:rgb(0, 0, 0);
            font-size: 18px;
        }
        .pop {
            cursor: pointer;
            font-size: 1.3rem;
            text-align: center;
            color:rgb(255, 0, 0);
        }
        .description {
            text-align: center;
            width: 95%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            padding: 0 10px;
            margin:5px auto ;
        }
    .postj{
        display:none;
    }
    td{
        font-size: 0.7rem;
    }
    th{
        font-size: 0.8rem;
    }
}
/* //////////////////////////パソコン/////////////////////// */
@media screen and (min-width: 1440px) {
    .zoom-in-img {
        max-width: 270px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .suggestion_img{
        width:270px;
        margin:10px 0 10px 5%;
    }
    .suggestion_img img{
        width:150px;
        margin:10px 0 10px 5%;
    }
    .d_zoom-in-img {
        max-width: 185px;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .descussion_img{
        width:100px;
        margin:10px 0 10px 5%;
    }
    .img10{
        width:100px;
        margin:10px 0 10px 6%;
    }

    .centre01{
        width:60%;
        margin:10px auto;
        position: relative;
    }
    .Top_content{
        display:block;
        margin:0 5%;
    }
    .Top_content2{
        display:block;
        margin:0 5%;
    }
    .titl{
        text-align: center;
    }
    .img_tex{
        position: absolute;
        top:70%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:70px;
        font-weight:bold;
        color: rgb(255, 255, 255);
        padding:0;
        margin:0;
    }
    #child4 {
        background-color: rgb(255, 255, 255);
        flex-grow: 1;
        max-width:650px;
        min-width: 250px;
    }
    #parent {
        display: flex;
        clear: both;
    }

    #parent01 {
        display: flex;
        clear: both;
        margin:0% 3%;
    }
    .section_1{
        height:150px;
        overflow:auto;
    }

    .section_2{
        display:none;
    }
    .boxcate{
        font-size: 0.7rem;
        width:50%;
    }

    .boxtitl{
        font-size:1.2rem;
    }
    .boxdate{
        font-size:0.7rem;
    }
    .boxbody{
        font-size: 0.8rem;
    }
    .sample02 {
        margin : 0 0 10px 0;
        width : 100%;
        font-size : 24px;
        text-align : center;
        overflow : hidden;
        }
        .sample02 ul{
        margin:0;
        display : inline-block;
        padding-left: 100%;
        white-space : nowrap;
        line-height : 2em;
        animation : scrollSample02 25s linear infinite;
        }
        .sample02 ul li{
        display:inline;
        margin:0 100px 0 0;
        }

        @keyframes scrollSample02{
        0% { transform: translateX(0)}
        100% { transform: translateX(-100%)}
        }
        .today{
            font-weight:bold;
            color:rgb(255, 0, 0);
            font-size: 25px;
        }
        .tomorrow{
            color:rgb(0, 0, 0);
            font-size: 25px;
        }
        .pop {
            cursor: pointer;
            font-size: 2rem;
            text-align: center;
            color:rgb(255, 0, 0);
        }
        .description {
            text-align: center;
            width: 95%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            padding: 0 10px;
            margin:5px auto ;
        }
}

.container {
    justify-content: center;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    background-color: #ffffff;
    gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    margin: 0 10%;
    padding:5px;
}


.item01 {
    background: rgb(252, 244, 244);
    text-align: center;
    font-size: 15px;
    border: 1px solid #d6d6d6;
}
.item01:hover{
    color:  rgb(255, 0, 0);
    background: #fff;
}
.item02 {
    background: rgb(246, 252, 246);
    text-align: center;
    font-size: 15px;
    border: 1px solid #d6d6d6;
}
.item02:hover{
    color: rgb(0, 189, 9);
    background: #fff;
}

.position_{
    display:flex;
    justify-content:right;
}

.button{
    margin: 5px;
    color: inherit;
    text-decoration: none;
}

table{
    width:100%;
    text-align: center;
}
table th {
    background: #c7d0ff;
    text-align: center;
}
table td {
	background: #eee;
    text-align: center;
}
table tr:nth-child(odd) td {
	background: #fff;
}

.img{
    width:50px;
    height:50px;
    vertical-align: middle;
    margin:5px;
}

.font_{
    font-size:1.5rem;
    font-weight:bold;
}

.center_{
    display:flex;
    justify-content: center;
}

.work_link{
    text-decoration: none;
}

.hexagon3__wrapper {
	display: flex;
	flex-wrap: wrap;
	--wrapper-width: 30%;
	width: var(--wrapper-width);/* 全体の大きさを変更できる */
	margin-right: calc(-1 * var(--wrapper-width) / 3 * 0.25 * 2 - var(--wrapper-width) / 3 * 0.05 * 2);
    margin:10px 0 10px 10%;
    font-size: 1.4vw;
    font-weight:bold;
}
@media(max-width: 900px) {
	.hexagon3__wrapper {
		--wrapper-width: 90%;
		font-size: 3vw;
        margin:20px 15% 10px 10%;
	}
}


.cent10{
    display:flex;
    flex-wrap: wrap;
    justify-content: left;
}