@charset "UTF-8";

/* 共通部分
----------------------------------*/
html {
    font-size: 100%;
}

a {
    text-decoration: none;
    color: #000000;
}
img {
    width: 100%;
}
body {
    font-family: "Montserrat";
    margin: 0 auto;
}

/* Headder----------------------- */

header {
    padding: 35px 200px;
    background-color: #ECEAE4;
}

.header-g {
    display: flex;
    Justify-content:space-between
    
}
.header-logo {
    width: 42px;
}

.main-nav {
    display: flex;
    gap: 50px;
    padding: 20px 0px
}

.main-nav a:hover {
    transition-property: opacity;
    transition-duration: 0.7s;
    opacity: 0.4; 
}

li{
    list-style: none;
    font-size: 20px;
}

/* ◆top-Main------------------------------- */
.main {
    background-color: #ECEAE4;
}

.main-visual {
    width: 950px;
    margin: 0 auto;
    padding: 40px 0 150px 0;
}

/* top-About----------------------- */
.top-about {
    background-color: #A5AD97;
    padding: 100px 0;
}

.top-about-visual {
    width: 300px;
    margin: 0 auto;
    
}
h2 {
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1px;

    font-size: 40px;
    color: #000000;
    margin: 0 auto;
    text-align:center;
    padding: 0 0 120px 0;
}

.top-about-text p {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;

    font-size: 16px;
    letter-spacing: 1px;
    color: #000000;
    margin: 0px;
    text-align:center;
    padding-top: 70px;
}

/* top-Viewmore共通----------------------- */
.viewmore {
    width:100px;
    border: solid 1px #000000;
    padding: 10px 20px;
    box-shadow: 1px 1px 2px #777676;
    margin: 90px auto 0 auto;
}

.viewmore a:hover {
    transition-property: opacity;
    transition-duration: 0.6s;
    opacity: 0.4; 
}

.viewmore-link {
    margin: 0;
    text-align: center;
}

/* top-Works----------------------- */
.top-works {
    background-color: #ECEAE4;
    padding: 100px 0;
}

.works-visual-g {
    display: grid;
    grid-template-columns: repeat(2,490px);
    column-gap: 50px;

    place-content: center;
    place-items: center;
    margin: 0 auto;
    
}

.works-visual {
    margin: 0;
    height: auto;
}
  
.works-visual p {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    
    font-size: 16px;
    letter-spacing: 1px;
    color: #000000;
    margin: 15px 0 0 0;
}

/* top-Contact----------------------- */
.top-contact {
    background-color: #ECEAE4;
    padding: 100px 0;
}  

.top-contact-title {
    width: 1000px;
    border: 1px solid #000000;
    margin: 0 auto;

}

.top-contact h2 {
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1px;

    font-size: 40px;
    color: #000000;
    margin: 0 auto;
    text-align:center;
    padding: 30px 0 20px 0;
}

.top-contact p {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;

    font-size: 16px;
    letter-spacing: 1px;
    color: #000000;
    margin: 0 auto;
    text-align:center; 
}

.top-contact-btn {
    width: 500px;
    margin: 0 auto;
    padding: 50px 0;
}

.top-contact-btn a:hover  {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0.7;
}

/* Footer----------------------- */
.footer {
    padding: 35px 200px;
    background-color: #A5AD97;
}

.footer-g {
    display: flex;
    padding: 35px 200px;
    background-color: #A5AD97;
	justify-content: space-between;
}
.footer-logo {
    width: 40px;
}

.footer-nav a:hover {
    transition-property: opacity;
    transition-duration: 0.7s;
    opacity: 0.4;
}

.footer-nav {
	display: flex;
}

.footer-nav1 li{
	padding-bottom: 20px;
}

.footer-nav2 li{
	padding-bottom: 20px;
}

/* ◆Contact-page------------------------------------- */
.contact {
    background-color: #ECEAE4;
    padding: 0 20% 80px 20%;
}

h2.contact-title {
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 50px;
    letter-spacing: 1px;
    color: #000000;
    text-align: left;

	margin-bottom: 50px;
	padding: 0 0 30px ;
	border-bottom: 1px solid #000000;
}

.contact-form {
    width: 100%;
    margin:0 auto;
    place-items: center;
}

.contact-form h3 {
    font-family: "Zen Maru Gothic", serif;
    font-weight:normal;
    padding-bottom: 15px;
    font-size: 20px;
    letter-spacing: 2px;
    color: #000000; 
}

.contact-form p,th {
    font-family: "Zen Maru Gothic", serif;
    font-weight:normal;
    padding-bottom: 15px;

    font-size: 14px;
    letter-spacing: 2px;
    color: #000000;
    text-align:left;
}

.contact-form input:not(input[type="submit"]),.contact-form textarea{
    width:100%;
    font-size: 14px;
    background-color: #f0f0f0;
}
.contact-form input:not(input[type="submit"]) {
	height: 30px;
    border: 1px solid #757575;
}
.contact-form textarea{
	height: 200px;
    resize: vertical;
    border: 1px solid #757575;
    margin-top: 15px;
}

.contact-form th{
    padding: 20px 15px 20px 0 ;
    vertical-align:top;
}

.submit {
    text-align: center;

}

.submit-btn{
    margin: 80px 0 20px 0;
    border: none;
    border-radius: 0.7em;        /* 角丸 */
    font-family: "Zen Maru Gothic", serif;
    background-color: #7C0000; /* 背景色 */
    color: #ffff;
    font-weight:normal;
    width: 280px;                /* 横幅 */
    height: 50px;
    font-size: 1.4em;            /* 文字サイズ */
}

 .submit:hover  {
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0.8;
}

/* ◆Works-page------------------------------------ */
.works {
    background-color: #ECEAE4;
    padding-bottom: 200px;
}

.works-g {
    width:1000px;
    height: auto;
    margin:0 auto;
}

h2.works-title {
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 50px;
    color: #000000;
    text-align: left;
    letter-spacing: 1px;
}

/* ◆about-page------------------------------------ */
/* profile--------------------------- */
.profile {
    background-color: #ECEAE4;
    padding: 30px 0 120px 0;
}

.profile-g {
    width:670px;
    display: flex;
    margin:0 auto;
    justify-content: space-between;
}

.textbox {
    padding:60px 30px 60px 30px;

}
.profile-title {
    font-family: "Montserrat";
    font-size: 16px;
    letter-spacing: 1.5px;
    margin: 16px 0 40px 0;
}

.profile-p {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    margin:0;
    padding-bottom: 5px;
}

.profile-img {
    width:200px;
    padding-left:50px;

}

/* Experience--------------------------- */
.exp-deco {
    width: 100%;
    line-height:0;
    margin:0 auto;
    padding:0;
    overflow: hidden;
}

.experience {
    background-color: #D9D5CA;
    padding: 30px 0 120px 0;
}

.experience-g {
    width:800px;
    display: flex;
    margin:0 auto;
    justify-content: space-between;
}

.experience-img {
    width:400px;
}
.experience-img2 {
    width: 58px;
    padding: 14px 0 0 40px;
}

.experience-contents {
    padding-top: 15px;
} 
.exp-p1,.exp-p2,.exp-p3,.exp-p4 {
    font-family: "Zen Maru Gothic", serif;
}

.exp-p1 {
    font-size: 13px;
    margin:0;
    padding-bottom: 8px;
}

.exp-p2 {
    font-size: 13px;
    margin:0;
    padding-bottom: 2px;
}

.exp-p3 {
    font-size: 11px;
    margin:0;
    padding-bottom: 2px;  
}
.exp-p4 {
    font-size: 11px;
    margin:0;
    padding-bottom: 30px;
}

/*Skills--------------------------- */
.skills {
    background-color: #ECEAE4;
    padding: 100px 0 150px 0;
}
.skills-h2 {
    font-family: "Cormorant Infant", serif;
    font-size: 40px;
    color: #000000;
    letter-spacing: 1px;
    margin: 0 auto;
    text-align:center;
    padding: 0 0 60px 0;
}

.skills-p {
    font-family: "Zen Maru Gothic", serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    padding-bottom: 50px;
    margin: 0;
}

.skills-g {
    display: grid;
    grid-template-columns: repeat(5,130px);
    column-gap: 30px;

    place-content: center;
    place-items: center;
    margin: 0 auto;  
}

/*Myfovorites--------------------------- */
.myfavorites {
    background-color: #ECEAE4;
    padding: 30px 0 120px 0;
}

.mf-back {
    width: 800px;
    background-color: #f5f5f5;
    box-shadow: 10px 10px 15px -12px #bdbcb9;
    padding: 50px 0;
    place-content: center;
    margin: 0 auto;
}

.mf-h2 {
    font-family: "Cormorant Infant", serif;
    font-size: 30px;
    color: #000000;
    letter-spacing: 1px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 40px;
}
.mf-textbox {
    padding-bottom:30px;

}
.mf-p {
    font-family: "Zen Maru Gothic", serif;
    font-size: 13px;
    text-align: center;
    padding-bottom: 7px;
    margin: 0;
}

.mf-photos {
    display: grid;
    grid-template-columns: repeat(4,160px);
    column-gap: 15px;
    row-gap: 15px;

    place-content: center;
    place-items: center;
    margin: 0 auto;
}
/* ◆worksmore-page------------------------------------ */
.worksmore {
    background-color: #ECEAE4;
    padding: 0 20% 80px 20%;
}

.worksmore-title {
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 50px;
    letter-spacing: 1px;
    color: #000000;
    text-align: left;

	margin-bottom: 50px;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #000000;
}
.worksmore h3 {
    font-family: "Zen Maru Gothic", serif;
    font-weight:normal;
    font-size: 20px;
    color: #000000;
    letter-spacing: 1px;
    margin: 0 auto;
    padding-bottom: 35px;
}

.worksmore-p {
    font-family: "Zen Maru Gothic", serif;

    color: #000000;
    letter-spacing: 1px;
    padding: 20px 10px 100px 10px;
}

img {
    height : auto;
    object-fit: cover;
}