body{ margin: 0 auto; background-color: #fef263; } .main .flex{ display: flex; margin: 2em 5em; } .hidari{ width: 65%; text-align: center; } .kikan{ display: flex; height: 100px; margin: 0 44px; } .kikan .tate{ text-align: center; writing-mode: vertical-lr; font-size: 28px; color: #474a4d; } .kikan .big{ font-size: 52px; color: #474a4d; } .kikan .ccc{ font-size: 30px; color: #474a4d; } .migi{ width: 35%; text-align: center } .main .title{ display: flex; text-align: center; } .maru1{ border-radius: 50%; width: 100px; height: 100px; margin-left: 16px; background-color: #474a4d; color: #ffffff; } .maru1 p{ text-align: center; margin-top: 26px; } .migi .title p::before , .migi .title p::after{ content: ' '; width: 3px; height: 60px; background-color: #192f60; text-align: center; display: inline-block; margin: 0; } .main .title p{ writing-mode: vertical-lr; font-size: 30px; color: #192f60; margin-top: 0; margin-left: 80px; width: 40%; text-align: center; } .migi .title h1{ writing-mode: vertical-rl; text-align: center; margin-right: 60px; margin-left: 0; margin-bottom: 20px; color: #192f60; font-size: 80px; width: 60%; } .naka { border-top: #808000 solid 2px; border-bottom: #808000 solid 2px; color: #474a4d; } .naka p{ font-size: 20px; text-align: center; margin: 5px; color: #474a4d; } .hoka ul{ writing-mode: vertical-lr; font-size: 30px; text-align: left; margin-left: auto; margin-right: auto; color: #474a4d; } .nakami .flex{ display: flex; background-color: #192f60; margin: 0; height: 250px; } .nakami .a{ width: 50%; border-right: #ffffff solid 2px; margin: 8px; } .maru2{ position: absolute; margin: -12px; border-radius: 50%; width: 255px; height: 255px; background-color: #fef263; color: #192f60; } .maru2 .ue{ font-size: 35px; font-weight: bolder; text-align: center; transform: rotate(-3deg); margin-top: 60px; margin-bottom: 0; } .maru2 .shita{ font-size: 25px; text-align: center; transform: rotate(-3deg); margin-top: 0; } .day1{ color: #ffffff; margin-left: 45.5%; font-size: 20px; text-align: center; } .day1 .small{ font-size: 10px; color: #ffffff; } .setsumei1{ color: #ebd842; margin-left: 300px; width: 242px; } .setsumei1 .small{ color: #ffffff; } .nakami .b{ width: 25%; border-right: #ffffff solid 2px; margin: 8px; } .day2{ color: #ffffff; font-size: 20px; text-align: center; margin-left: auto; margin-right: auto; } .day2 .small{ font-size: 10px; color: #ffffff; } .setsumei2{ color: #ebd842; width: 210px; margin-left: auto; margin-right: auto; margin-top: -2px; } .setsumei2 .small{ color: #ffffff; } .nakami .c{ width: 25%; margin: 8px; } .day3{ color: #ffffff; font-size: 20px; text-align: center; margin-left: 65px; display: flex; } .day3 .small{ font-size: 10px; color: #ffffff; } .setsumei3{ color: #ebd842; margin-top: -17px; margin-left: auto; margin-right: auto; width: 242px; } .setsumei3 .small{ color: #ffffff; } .memo .flex{ display: flex; margin-top: 2em; margin-right: 3em; margin-left: 3em; } .migi2{ width: 50%; height: 80%; color: #474a4d; font-weight: bolder; margin: 1em; } .migi2 dl{ font-size: 20px; } .migi2 dt{ margin-top: 10px; margin-bottom: 10px; margin-left: 20px; } .migi2 .a{ background-color: #192f60; color: #ffffff; width: 50px; text-align: center; } .migi2 .b{ background-color: #192f60; color: #ffffff; width: 262px; text-align: center; } .migi2 .c{ background-color: #192f60; color: #ffffff; width: 50px; text-align: center; } .migi2 .d{ background-color: #192f60; color: #ffffff; width: 132px; text-align: center; } .migi2 dd{ font-size: 17px; width: 65%; border-bottom: #f08300 3px solid; margin: auto; } .migi2 .small2{ font-size: 15px; } .hidari2{ width: 50%; margin: auto; } footer{ width: 100%; height: 125px; display: flex; background-color: #ebd842; } footer p{ width: 305px; font-size: 50px; margin-top: -14px; margin-left: 10px; margin-bottom: 0; } footer .small3{ width: 305px; font-size: 19px; margin-left: 4px; }