html {
    margin: 0px;
}
body {
    margin: 26px;
    background-color: #F4F3F3;
    font-family: proxima-nova, sans-serif;
}

a {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
/*                余白分でずれたwidthの計算を調整するやつ*/
/*                border: 14px solid #FFFFFF;*/
}
a:hover {
    color: #F0F0F0;
    transition: color 0.5s ease;
}
a:visited {
    color: #8F8F8F;
}

.header{
    display: flex;
    flex-direction: row;
    margin-bottom: 40px; 
}

.logo a {
    text-decoration: none;
    font-size: 20px;
    color: #f30606;
    font-family: 'Prata', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.logo a:visited {
    color: #f30606;
}

.menu {
    margin-left: 90px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 300px;
/*                margin-bottom: 36px;    */
}
.menu a {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    font-size: 16px;
    color: #9e9c9c;
    font-family: proxima nova, sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: auto;
}
.menu a.active{
    color: #8F8F8F;
}
.menu :hover {
    color: #8F8F8F;
    transition: color 0.5s ease;
}

/* .works {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            
} */
.workstitle{
    /* margin-bottom:20px; */
    font-size: 14px;
    color: #BDBDBD;
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 115%;
}

.workstitle.detail {
    margin-top:50px;
    margin-bottom:20px;
    color: #8F8F8F;
    font-size: 17.5px;
    line-height: 140%;
}

a:hover .workstitle {
    color: #8F8F8F;
    transition: color 0.5s ease;
}


img{
    width: 100%;
    /*おまじない*/
    vertical-align: bottom;
}

video{
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.video_wrap {
    height: 56.25%;
}

.workstitle {
    margin-top: 20px;
}

.phototitle{
    margin-top:20px;
    font-size: 14px;
    color: #BDBDBD;
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 115%;
}
/* -------------------------------- */

.center {
    align-items: center;
}

.center > * {
    width: 80%;
    max-width: 500px;
}

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

.center_main_visual > * {
    width: 60% !important;
}

/* -------------------------------- */
.layout1{
    /* background-color: blue; */
    align-items: flex-start;
    margin-bottom: 170px;
}
.layout_mini .layout1 {
    margin-bottom: 70px;
}
.works .layout1 {
    margin-bottom: 20px;
}
.layout1 img {
    width: 100%;
}
.layout1 > .center {
    display: flex;
    justify-content: center;
}
.layout1 > .center > * {
    width: 40%;
    max-width: 500px;
}

.layout1 .layout1 {
    margin-bottom: 0px;
}

/* -------------------------------- */
.layout2 {
    /* background-color: #f30606; */
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 170px;
}
.layout_mini .layout2 {
    margin-bottom: 70px;
}
.works .layout2 {
    margin-bottom: 20px;
}
.layout2 > div {
    width: calc(50% - 14px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.layout2 > * {
    width: calc(50% - 14px);
}

.layout2 > *:first-child {
    margin-right: 28px;
}

.layout2 > .center {
    width: 50%;
    margin-right: 0px !important;
}

.layout2 .layout1 {
    margin-bottom: 0px;
}

/* -------------------------------- */
.layout3 {
    /* background-color: green; */
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 170px;
}
.layout_mini .layout3 {
    margin-bottom: 70px;
}
.works .layout3 {
    margin-bottom: 20px;
}
.layout3 > div {
    width: calc(33.33% - 18px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.layout3 > * {
    width: calc(33.33% - 18px);
}

.layout3 > *:nth-child(1){
    margin-right: 28px;
}

.layout3 > *:nth-child(2){
    margin-right: 28px;
}

.layout3 .layout1 {
    margin-bottom: 0px;
}

/* -------------------------------- */


.layout4 {
    width: calc(100% - 56px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.layout4 img {
    margin-bottom: 28px;
}
.layout4 img:nth-child(1){
    width: 50%;
    margin-right: 28px;
}
.layout4 img:nth-child(2){
    width: 25%;
    margin-right: 28px;
}
.layout4 img:nth-child(3){
    width: 25%;
}

.layout5 {
    width: calc(100% - 136px);
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.layout5 img {
    width: 8%;
    margin-bottom: 16px;
}
.layout5 img:nth-child(1){
    margin-right: 17px;
}
.layout5 img:nth-child(2){
    margin-right: 17px;
}
.layout5 img:nth-child(3){
    margin-right: 17px;
}
.layout5 img:nth-child(4){
    margin-right: 17px;
}
.layout5 img:nth-child(5){
    margin-right: 17px;
}
.layout5 img:nth-child(6){
    margin-right: 17px;
}
.layout5 img:nth-child(7){
    margin-right: 17px;
}
.layout5 img:nth-child(8){
    margin-right: 17px;
}

@media screen and (min-width:1280px) {
    .layout5 {
        width: 100%;
    }
}

.layout6 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.layout6 a:nth-child(1) {
    margin-right: 28px;
}
.layout6 div {
    width: 100%;
}

.layout7 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.layout7 div:nth-child(1) {
    margin-right: 28px;
}
.layout7 div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.layout7 div {
    width: 50%;
}
.layout7 div img {
    width: 100%;
    height: auto;
}

.layout8 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.layout8 a:nth-child(1) {
    margin-right: 28px;
}
.layout8 a:nth-child(2) {
    margin-right: 28px;
}
.layout8 div {
    width: 100%;
}

.layout9{
    align-items: flex-start;
}
.layout9 img {
    width: 100%;
    margin-bottom: 200px;
}

.workstext{
    width: 80%;
    max-width: 850px;
    margin-top: 40px;
    font-size: 13px;
    color: #8f8f8f;
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 180%;
}

.workstext a {
    color: #8f8f8f;
} 

.workstext a:hover {
    opacity: 0.5;
    transition: opacity 0.5s ease;
} 

.workscredit{
    width: 80%;
    max-width: 850px;
    margin-top: 60px;
    font-size: 12px;
    color: #8f8f8f;
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 160%;
}


.footer{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
    font-size: 12px;
    color: #8F8F8F;
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 140%;
    text-decoration: none;
}

iframe {
    width: 100%; /* 任意の横幅を指定 */
    height: auto;
    aspect-ratio: 16/9;
}

.mm_logo {
    width: 70px;
    
}