@charset "utf-8";

html{
    font-family: sans-serif;
}
@media(max-width: 600px){
    html{
        font-size: 1rem;
    }
}
@media(max-width: 415px){
    html{
        font-size: 1rem;
        line-height: 21px;
        font-weight: 500;
    }
}

/* header  */
a{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.hide{
    display: inline-block;
    text-decoration: none;
    text-align: center;
    letter-spacing: .8px;
    position: relative;
}
/* アンダーラインを表現する疑似要素*/
.hide::after {
    content: '';
    display: block;
    /* 初期状態でのwidthは0 */
    width: 0;
    height: 2px;
    background: #ffffff;
    position: absolute;
    bottom: 0;
    /* leftを0にすることで左から線が伸びる   */
    left: 0;
    /* ゆっくり線がのびるようにする   */
    transition: .5s;
}
/* マウスカーソルが乗っかるとwidthが100%に伸びる */
.hide:hover::after {
    width: 100%;
}

.navi-menu{
    font-size: 1.3rem;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 2.5rem;
}
.menu-sub{
    font-weight: normal;
    font-size: 1rem;
}
.hide-sns{
    display: flex;
}
.hide-icons-insta{
    width: 30px;
}
.hide-icons-mail{
    width: 30px;
    margin-left: 20px;
} 
.hide-logo{
    width: 20%;
}
.hide-copyright{
    font-size: .7rem;
    color: #ffffff;
}
@media(max-width: 1000px){
    .hide-copyright{
        font-size: .4rem;
    }
    .hide-copyright{
        font-size: .1rem;
    }
}
@media(max-width: 850px){
    .hide-logo{
        width: 30%;
    }
    .hide-copyright{
        font-size: .08rem;
    }
}
@media(max-width: 550px){
    .hide-logo{
        width: 50%;
        margin-bottom: 0;
    }
    .hide-copyright{
        font-size: .1rem;
        margin-top: 0;
    }
    .navi-menu{
        text-align: center;
        margin: auto;
    }
    .hide-sns{
        margin: auto;
        width:fit-content
    }
}

.header-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* top */
.top-container{
    position: relative;
}
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 32%;
    height: auto;
}
@media(max-width: 1000px){
    .logo{
        width: 70%;
    }
}
@media(max-width: 700px){
    .logo{
        width: 70%;
    }
}

/* main */
.main-wrapper{
    margin: 30px;
}
@media(max-width: 1000px){
    .main-wrapper{
        margin: 20px 50px;
    }
}
@media(max-width: 770px){
    .main-wrapper{
        margin: 20px 0px;
    }
}
.slidein{
    transform: translateY(100px);
    opacity: 0;
    transition: transform 1s, opacity 1s;
}
.is-fadein {
    transform: translateY(0);
    opacity: 1;
}


/* intro */
.intro-wrapper{
    display: flex;
    background-color: #fff;
    padding: 50px;
}
.intro-logo{
    min-width: 180px;
    max-width: 250px;
    margin: auto 50px;
}
.message-wrapper{
    background-color: #e3e9ef;
    width: 100%;
    padding: 30px 30px;
}
.message-top{
    font-size: 1.7rem;
    font-weight: bold;
    text-align: left;
}
.message-sign{
    width: 130px;
    height: auto;
    justify-content: left;
}
@media(max-width: 1000px){
    .intro-wrapper{
        display: block;
    }
    .intro-logo{
        width: 300px;
        margin: auto;
    }
    .message-wrapper{
        width: 100%;
        margin: auto;
    }
    .message-top{
        font-size: 1.5rem;
    }
}
@media(max-width: 450px){
    .intro-wrapper{
        padding: 10px;
    }
    .intro-logo{
        width: 1%;
        margin: auto;
    }
    .message-top{
        font-size: 1.4rem;
        line-height: 30px;
        letter-spacing: 1.1px;
    }
    .message-p{
        font-size: 1rem;
        line-height: 22px;
        letter-spacing: .7px;
    }
}

/* center-line */
.line {
	display: flex;
	text-align: center;
	color: #fff;
	font-weight: bold;
    margin: 20px 0;
}
.line .box-a {
	flex-grow: 1;
	position: relative;
	height: 200px;
	line-height: 140px;
	margin-right: 2em;
}
.line .box-a::after {
	position: absolute;
	top: 50px;
	left: 100%;
	margin: 0 1rem;
	content: "";
	width: 1px;
	height: 50%;
	background-color: #ffffff;
}
.line .box-b {
	flex-grow: 1;
	height: 200px;
	line-height: 140px;
}
@media(max-width: 450px){
    .line .box-a {
        flex-grow: 1;
        position: relative;
        height: 50px;
        line-height: 50px;
        margin-right: 2em;
    }
    .line .box-a::after {
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0 1rem;
        content: "";
        width: 1px;
        height: 80%;
        background-color: #fffefe;
    }
    .line .box-b {
        flex-grow: 1;
        height: 50px;
        line-height: 140px;
    }
}

/* about */
.about{
    background-color: #fff;
    padding: 50px;
}
.title-about{
    width: 15%;
    margin: 0 auto 50px;
}
.about-wrapper{
    display: flex;
}
.about-image{
    min-width: 250px;
    max-width: 400px;
    margin: auto;
    padding: 0 0 0 30px;
}
.about-text{
    background-color: #e3e9ef;
    padding: 30px 30px;
}
/* .sub-title-introduction{
    width: 25%;
    margin: 10px 0;
} */
.title-name{
    width: 40%;
    padding: 20px 0;
    /* margin-bottom: 20px; */
}
.sub-title-carrer{
    width: 11%;
}
.sub-title-specialty{
    width: 15%;
    margin: 20px 0 10px 0;
}
.specialty-name{
    font-weight: bold;
    font-size: 17px;
    margin: 10px 0;
}
.license{
    width: 14%;
}

@media(max-width: 1000px){
    .title-about{
        width: 30%;
        text-align: center;
        margin: 30px auto 10px auto;
    }
    .about-wrapper{
        flex-direction: column-reverse;
        margin: auto;
    }
    .about-image{
        min-width: 200px;
        max-width: 350px;
        padding: 20px 0;
    }
    /* .sub-title-introduction{
        width: 20%;
        margin: 10px 0;
    } */
    .license{
        width: 14%;
    }
}
@media(max-width: 650px){
    /* .sub-title-introduction{
        width: 35%;
        margin: 10px 0;
    } */
    /* .title-about{
        width: 30%;
    } */
    .about{
        padding: 10px;
    }
    .about-text{
        padding: 20px;
    }
    .title-name{
        width: 58%;
        padding: 20px 0;
        /* margin-bottom: 10px; */
    }
    .sub-title-carrer{
        width: 20%;
        margin: 10px 0;
    }
    .sub-title-specialty{
        width: 25%;
        margin: 20px 0 10px 0;
    }
    .license{
        width: 25%;
    }
}

/* space */
.space{
    height: 50px;
}
@media(max-width: 400px){
    .space{
        height: 50px;
    }
}

/* skills */
.skills{
    background-color: #fff;
    padding: 50px;
}
.title-skill{
    width: 20%;
    margin: 0 auto 50px;
}
.skill-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #e3e9ef;
    padding: 20px 0;
}
.skill-image {
    max-width: 100%;
    vertical-align: bottom;
    text-align: center;
}
.skill-logo {
    width: 50%;
    margin-top: 40px;
}
.skill-name {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin: 10px 0;
}
.skill-desc {
    max-width: 140px;
    line-height: 1.2rem;
    font-size: 12px;
}

@media(max-width: 1000px){
    .title-skill{
        width: 40%;
        margin: 30px auto;
    }
}
@media(max-width: 700px){
    .skills{
        padding: 10px;
    }
    .skill-list{
        margin: auto;
    }
    .list{
        margin: 0 0;
    }
    .skill-logo {
        width: 40%;
    }
    .skill-name {
        margin: 10px 0;
    }
    .skill-desc {
        text-align: center;
        line-height: 15px;
        font-size: .8rem;
    }
}

/* product */
.product{
    background-color: #fff;
    padding: 50px;
}
.Product-wrapper{
    display: flex;
}
.title-product{
    width: 20%;
    margin: 0 auto 50px;
}
.title-menu{
    width: 15%;
    margin: 20px 0 10px 0;
}
.menu-text{
    background-color: #e3e9ef;
    padding: 10px 30px 30px 30px;
}
.menu-image{
    min-width: 200px;
    max-width: 400px;
    margin: auto;
    padding: 0 30px 0 0;
    cursor: pointer;
}
.span{
    letter-spacing:-.2em;
    width:4em;
    margin-right:.5em;
}
.more{
    color: black;
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
}
.more:hover{
	color: #d0c6c6;
	font-size: 20px;
	font-weight: bold;
}

@media(max-width: 1000px){
    .product{
        padding: 10px;
    }
    .title-product{
        width: 35%;
        margin: 30px auto;
    }
    .title-menu{
        width: 10%;
        margin: 10px 0;
    }
    .Product-wrapper{
        display: block;
        margin: auto;
    }
    .menu-image{
        min-width: 200px;
        max-width: 350px;
        margin: auto;
        padding: 20px 0;
        cursor: pointer;
    }
}
@media(max-width: 650px){
    .title-menu{
        width: 25%;
        margin: 10px 0;
    }
    .menu-text{
        padding: 30px;
    }
}

/* work */
.work{
    background-color: #fff;
    padding: 50px;
}
.work-wrapper{
    display: flex;
    flex-direction: row;
}
.title-work{
    width: 13%;
    margin: 0 auto 50px;
}
.title-Results{
    width: 18%;
    margin: 20px 0 10px 0;
}
.work-text{
    background-color: #e3e9ef;
    padding: 10px 30px 30px 30px;
}
.work-image{
    min-width: 200px;
    max-width: 400px;
    margin: auto 0 auto auto;
    padding: 0 0 0 30px;
    cursor: pointer;
}
@media(max-width: 1000px){
    .title-work{
        width: 20%;
        margin: auto;
        margin-bottom: 20px;
    }
    .title-Results{
        width: 13%;
        margin: 10px 0;
    }
    .work-wrapper{
        flex-direction: column-reverse;
        margin: auto;
    }
    .work-image{
        min-width: 200px;
        max-width: 350px;
        margin: auto;
        padding: 20px 0;
        cursor: pointer;
    }
}
@media(max-width: 650px){
    .work{
        padding: 10px;
    }
    .title-work{
        margin: 30px auto;
        width: 25%;
    }
    .title-Results{
        width: 25%;
        margin: 20px 0 10px 0;
    }
    .work-text{
        padding: 20px;
    }
    .results-list{
        margin: 4px 0;
    }
}

/* insta */
.insta{
    background-color: #fff;
    padding: 50px;
}
.title-insta{
    width: 25%;
    margin: 0 auto 50px;
}
@media(max-width: 750px){
    .insta{
        padding: 10px;
    }
    .title-insta{
        width: 40%;
        margin: auto;
        margin-bottom: 20px;
    }
}

/* .insta-wrapper{
    display: flex;
    text-align: center;
    width: 10%;
    margin: 10px;
}
.insta-wrapper > .insta-media > iframe{
    height: 370px;
}
.insta-media{
    display: flex;
}

@media(max-width: 1111px){
    .insta-wrapper{
        width: 10%;
        text-align: center;
        padding: 10px;
        flex-wrap: wrap;
    }
    .insta-wrapper > iframe{
        height: 370px;
    }
}

@media(max-width: 750px){
    .title-insta{
        width: 40%;
        margin: auto;
        margin-bottom: 20px;
    }
    .insta-media{
        display: block;
    }
}

@media(max-width: 415px){
    .insta-wrapper{
        width: 1%;
        text-align: center;
        flex-wrap: wrap;
    }
    .insta-wrapper > iframe{
        height: 50px;
    }
} */

/* footer */
.footer {
    display: block;
}
.footer {
    background-color: #a1bbda;
}
.footer-space{
    height: 30px;
}

.footer-wrapper{
    display: block;
}

.footer-logo{
    width: 22%;
    height: auto;
    text-align: center;
    margin: auto;

}
.footer-list {
    display: flex;
    /* padding: 20px; */
    justify-content: center;
    margin: auto;
    font-size: 1.2rem;
    position: relative;
}
.footer-item{
    margin: 20px;
    cursor: pointer;
}

.footer-icon{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.footer-icons-insta{
    width: 1.5rem;
    margin: 0 20px;
}
.footer-icons-mail{
    width: 1.5rem;
    margin: 0 20px;
}


.copyright {
    text-align: center;
    padding-bottom: 20px;
    font-size: 1rem;
    color: white;
    font-family: Schnebel Sans Pro Comp;
    letter-spacing: 1px;
}
@media(max-width: 700px){
    .footer-list {
        font-size: .9rem;  
    }
}
@media(max-width: 415px){
    .footer-logo{
        width: 35%;
        margin: auto;
    }
    /* .footer-list {
        display: block;
        text-align: left;
        margin:  10px 0 0 15px;
        font-size: 1rem;
        
    } */
}