img {
vertical-align: bottom;
width: 100%;
height: auto;
}
body {
background: #d5e3e6;
}
p, li, span {
margin: 0;
letter-spacing: .08em;
color: #251e16;
line-height: 2;
font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}
ul {
margin: 0;
padding: 0;
margin-top: 30px;
}
h1, h2, h3, h4 {
margin: 0;
letter-spacing: .16em;
color: #251e16;
font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
font-weight: normal;
}
img {
width: 100%;
}
ul {
margin-bottom: 0;
}
a {
text-decoration: none;
}
.sp-kv {
display: none;
}
.sp-br {
display: none;
}
.tb-br {
display: none;
}
.sp-photo {
display: none;
}
.font-orange {
color: #c9825d;
font-weight: 600;
}
.font-blue {
color: #8bbabf;
font-weight: 600;
}
.font-bold {
font-weight: 600;
background: linear-gradient(to bottom, transparent 50%, rgba(201, 130, 93, 0.2) 50%);
}
.under-beige {
color: #c69c6d;
font-weight: 600;
background: linear-gradient(to bottom, transparent 50%, rgba(198, 156, 109, .15) 50%);
}
.under-orange {
color: #c9825d;
font-weight: 600;
background: linear-gradient(to bottom, transparent 50%, rgba(198, 156, 109, .15) 50%);
}
.under-brown {
color: #83401d;
font-weight: 600;
background: linear-gradient(to bottom, transparent 50%, rgba(198, 156, 109, .15) 50%);
}
.under-blue {
color: #8bbabf;
font-weight: 600;
background: linear-gradient(to bottom, transparent 50%, rgba(139, 186, 191, 0.2) 50%);
}
.over-wrap {
width: 1000px;
margin: 0 auto;
background: #fff;
} .mail-form {
width: 80%;
margin: 0 auto;
}
.input.text.input_unit.required {
width: 500px;
height: 50px;
margin: 0 auto;
}
.my_column.my_right {
padding: 0 !important;
height: 100%;
width: 100%;
}
form.myForm input[type="text"], form.myForm input[type="password"] {
height: 50px;
width: 100% !important;
padding: 0 !important;
background: #fff !important;
border: solid 1px #8bbabf !important;
border-radius: 0px !important;
text-align: center;
font-size: 14px;
letter-spacing: .14em;
}
form.myForm div.submit {
text-align: center;
width: max-content;
margin: 0 auto;
margin-top: 15px !important;
}
.form_input_submit {
position: relative;
cursor: pointer !important;
}
.submit-arrow {
position: absolute;
top: 0;
bottom: 0;
right: 40px;
margin: auto;
height: max-content;
display: flex;
width: 30px;
}
.form_input_submit {
width: 500px !important;
height: 90px;
border-radius: 100px;
border: none;
color: #fff;
font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: .1em;
background: linear-gradient(to bottom, #efd4c7, #c9815c);
cursor: pointer !important;
transition: all 1s !important;
overflow: hidden;
}
input[type="submit"] {
width: 100%;
height: 100%;
position: relative;
opacity: 0;
z-index: 10;
cursor: pointer !important;
transition: all 1s !important;
}
.form_input_submit:hover {
background: linear-gradient(#ecfbfd, #5f8184);
}
.form_input_submit p {
position: absolute;
top: 15px;
bottom: 0;
right: 0;
left: 0;
width: 100%;
margin: auto;
color: #fff;
line-height: 1.4;
} .top-application-over {
width: 80%;
margin: 0 auto;
padding: 30px 0;
background: #8bbabf;
}
.application-over {
margin: 80px 0 50px;
padding: 40px 0;
background: #c69c6d;
}
.application-title {
text-align: center;
padding-top: 35px;
background: #ddeee675;
}
.application-title h2 {
color: #251e16;
}
.application-title p {
width: 80%;
margin: 0 auto;
display: block;
margin-top: 30px;
padding: 35px 0 0;
font-size: 20px;
font-weight: 600;
color: #dfeff2;
background: #8bbabf;
line-height: 1.6;
}
.application-title p span {
font-size: 28px;
color: #dfeff2;
line-height: 1.6;
}
.top-application:nth-child(4) .application-title, .top-application:last-child .application-title {
display: none;
}
.top-application:nth-child(4) .top-application-over {
width: 100%;
}
.top-application:last-child .top-application-over {
width: 100%;
} #movie {
margin: 100px 0 80px;
}
#movie .title {
height: 30px;
background-color: #e1e5e3;
position: relative;
width: 50%;
}
#movie .movie-title-photo {
width: 200px;
position: absolute;
left: 15%;
bottom: 15px;
}
.movie-subtitle {
width: calc(100% - 70px);
margin-left: 70px;
}
.movie-subtitle span {
font-size: 18px;
font-weight: 600;
letter-spacing: .2em;
}
.movie-wrapper {
width: 90%;
margin: 0 auto;
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.movie-left {
width: 45%;
}
.movie-right {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.movie-text1 p {
font-size: 20px;
}
.movie-text.movie-text1 {
padding-left: 30px;
}
.movie-text2 {
background: #c9815c;
text-align: center;
width: max-content;
max-width: calc(100% - 20px);
padding: 5px 5px 5px 25px;
margin-top: 20px;
}
.movie-text2 span {
color: #fff;
font-size: 40px;
line-height: 1;
font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}
.movie-text3 {
text-align: center;
margin-top: 50px;
}
.movie-text3 span {
font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
font-size: 28px;
line-height: 1.8;
font-weight: normal;
}
.movie-text3 .font-orange {
background: linear-gradient(to bottom, transparent 50%, rgb(232, 206, 193, .34) 50%);
padding: 5px 10px;
} .point-number {
width: 110px;
}
.point-text1 p {
font-size: 22px;
line-height: 1.8;
letter-spacing: .03em;
}
.point-text1 p span {
letter-spacing: .03em;
}
.point-wrapper {
width: 70%;
margin: 0 auto;
position: relative;
border-left: solid 10px #e1e5e3;
}
.point-wrapper1 {
margin-top: 50px;
}
.point-wrapper:not(.point-wrapper1) {
margin-top: 50px;
}
.point-left {
width: 15px;
position: absolute;
left: -1px;
top: 0;
}
.point-right {
padding: 10px 0px 10px 60px;
}
.point-title h3 {
font-size: 20px;
font-weight: 600;
font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}
.point-text1 {
margin-top: 20px;
}
.point-text2 {
margin-top: 20px;
text-align: center;
} #voices {
margin-top: 120px;
}
#voices .title {
height: 30px;
background-color: #e1e5e3;
position: relative;
width: 50%;
}
#voices .voice-title-photo {
width: 200px;
position: absolute;
left: 15%;
bottom: 15px;
}
.voice-subtitle {
width: calc(100% - 80px);
margin-left: 80px;
}
.voice-subtitle span {
font-size: 18px;
font-weight: 600;
letter-spacing: .2em;
} .voice-over {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
}
.voice {
width: 45%;
margin: 0 auto;
}
.voice1 {
margin-top: 50px;
}
.voice-text1 {
margin-top: 20px;
}
.voice-text1 p {
margin-bottom: 15px;
}
.voice-text1 p:last-of-type {
margin-bottom: 0;
}
.voice:not(.voice1) {
margin-top: 50px;
}
.voice-left {
width: 100%;
}
.voice-right {
width: 75%;
display: flex;
flex-direction: column;
justify-content: center;
}
.voice-inner {
border-bottom: solid 1px #adb4b0;
padding-bottom: 15px;
margin-top: 20px;
}
.voice-name span:first-of-type {
font-size: 20px;
font-weight: 600;
}
.voice-name span:last-of-type {
font-size: 14px;
font-weight: 600;
margin-left: -3px;
}
.voice-job {
display: flex;
}
.voice-job span {
font-size: 15px;
font-weight: 600;
color: #adb4b0;
line-height: 1.6;
}
.naratives {
width: 240px;
display: flex;
flex-direction: column;
justify-content: center;
}
.narative-border {
width: calc(100% - 245px);
margin-left: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
.narative-border span {
border-bottom: solid 2px #e1e5e3;
}
.magazine-wrapper {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.magazine {
width: 32%;
}
.magazine-text {
margin-top: 15px;
padding-left: 15px;
border-left: solid 8px #e1e5e3;
}
.magazine-text span {
display: block;
color: #251e16;
font-size: 12px;
}
.magazine-text span:last-of-type {
font-size: 12px;
margin-top: 10px;
}
.magazine-text span:nth-of-type(2) {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
letter-spacing: .05em;
}
.magazine-text span:last-of-type {
font-size: 12px;
line-height: 1.6;
}
.magazine3 .font-small {
margin-top: 0;
} #profile {
margin: 100px 0 80px;
}
.profile-treat {
width: 90%;
margin-top: 30px;
margin-right: 0;
margin-left: auto;
display: flex;
}
.naratives {
width: 240px;
display: flex;
flex-direction: column;
justify-content: center;
}
.narative-border {
width: calc(100% - 245px);
margin-left: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
.narative-border span {
border-bottom: solid 2px #e1e5e3;
}
.profile-name {
width: 75%;
margin: 0 auto;
margin-top: 50px;
display: flex;
}
.profile-name span:first-of-type {
font-size: 30px;
color: #c9815c;
font-weight: 600;
}
.profile-eng {
display: flex;
flex-direction: column;
justify-content: center;
}
.profile-name img {
width: 200px;
margin-left: 20px;
}
.profile-text1 {
width: 75%;
margin: 0 auto;
margin-top: 30px;
}
.profile-text p {
margin-bottom: 25px;
}
.profile-text p:last-of-type {
margin-bottom: 0px;
}
.profile-text2, .profile-text3 {
width: 75%;
margin: 0 auto;
margin-top: 50px;
}
.profile-title span {
font-size: 18px;
font-weight: 600;
color: #c9825d;
}
.profile-text2 ul li {
color: #251e16;
padding-left: 30px;
position: relative;
list-style-type: none;
}
.profile-text2 ul li::after {
content: "■";
position: absolute;
left: 0;
top: 0;
color: #e1e5e3;
}
.profile-text2 ul {
margin-top: 15px;
}
.copyright-wrapper {
text-align: center;
font-size: 11px;
margin: 20px 0;
}
@media screen and (max-width:1100px) {
.pc-br {
display: none;
}
.tb-br {
display: block;
}
body {
margin: 0 !important;
}
.over-wrap {
width: 90%;
} .movie-wrapper {
width: 90%;
display: block;
}
.movie-left {
width: 90%;
margin: 0 auto;
}
.movie-right {
width: 100%;
margin-top: 30px;
display: block;
}
.movie-text1 {
width: max-content;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.movie-text1 p {
font-size: 18px;
line-height: 1.8;
}
.movie-text.movie-text1 {
padding-left: 0;
}
.movie-text2 {
margin: 0 auto;
margin-top: 25px;
}
.movie-subtitle {
width: calc(100% - 50px);
margin-left: 50px;
}
.movie-text3 {
margin-top: 30px;
}
.movie-text3 span {
font-size: 26px;
} .voice-over {
width: 95%;
}
.voice-subtitle {
width: calc(100% - 60px);
margin-left: 60px;
}
.voice-job span {
font-size: 14px;
}
.voice-text1 p, .voice-text1 span {
font-size: 15px;
line-height: 1.8;
} .point-wrapper {
width: 90%;
}
.point-right {
padding: 10px 0px 10px 50px;
}
.point-text1 p {
font-size: 20px;
}
.point-text1 span {
line-height: 1.8;
} #profile {
margin: 80px 0 50px;
}
.profile-name {
width: 85%;
}
.profile-text1 {
width: 85%;
}
.profile-text2, .profile-text3 {
width: 90%;
} .application-title p {
width: 90%;
font-size: 18px;
}
.top-application-over {
width: 90%;
}
}
@media screen and (max-width:700px) {
.over-wrap {
width: 95%;
}
.pc-kv {
display: none;
}
.sp-kv {
display: block;
}
.sp-br {
display: block;
}
.my_column.my_right {
width: 100% !important;
}
.input.text.input_unit.required {
width: 95%;
}
.form_input_submit {
width: 95% !important;
height: 75px;
font-size: 17px;
}
form.myForm div.submit {
margin-top: 25px !important;
}
.top-application-over {
padding: 30px 0;
} #movie {
margin: 80px 0 50px;
}
#movie .title {
width: 70%;
}
#movie .movie-title-photo {
width: 180px;
}
.movie-subtitle {
width: calc(100% - 40px);
margin-left: 40px;
}
.movie-subtitle span {
letter-spacing: .16em;
}
.movie-wrapper {
width: 100%;
margin-top: 30px;
}
.movie-left {
width: 90%;
margin: 0 auto;
}
.movie-text1 p {
font-size: 16px;
}
.movie-text2 {
margin-top: 15px;
padding: 8px 5px 5px 15px;
}
.movie-text2 span {
font-size: 26px;
}
.movie-text3 span {
font-size: 18px;
letter-spacing: .06em;
}
.point-right {
padding: 10px 0px 10px 40px;
}
.point-number {
width: 90px;
}
.point-text1 p {
font-size: 16px;
} #voices {
margin-top: 100px;
}
#voices .title {
width: 70%;
}
.voice {
width: 85%;
display: block;
}
.voice1 {
margin-top: 30px;
}
.voice-subtitle {
width: calc(100% - 40px);
margin-left: 40px;
}
.voice-right {
width: 60%;
}
.voice-left {
width: 100%;
margin-top: 15px;
}
#voices .voice-title-photo {
left: 10%;
}
#voices .title span {
top: -20px;
color: #adb4b0;
font-size: 15px;
letter-spacing: .1em;
}
#voices .voice-title-photo {
width: 180px;
}
.voice-over {
width: 100%;
}
.voice-text1 p, .voice-text1 span {
font-size: 16px;
line-height: 1.8;
}
.voice-inner {
display: flex;
margin-top: 15px;
padding-bottom: 10px;
}
.voice-job {
display: flex;
margin-left: 15px;
padding-top: 10px;
}
.voice-job span {
font-size: 15px;
} .naratives {
width: 150px;
}
.narative-border {
width: calc(100% - 165px);
margin-left: 15px;
} #profile {
margin: 50px 0 60px;
}
.profile-name {
margin-top: 15px;
}
.profile-name img {
margin-left: 15px;
}
.profile-eng {
padding-top: 5px;
}
.profile-name span:first-of-type {
font-size: 24px;
}
.profile-name img {
width: 140px;
}
.profile-text p {
font-size: 15px;
margin-bottom: 20px;
}
.profile-text2 ul {
margin-top: 10px;
}
.profile-text2 ul li {
padding-left: 25px;
font-size: 14px;
}
.profile-text2, .profile-text3 {
width: 85%;
margin-top: 30px;
}
.magazine-wrapper {
display: block;
}
.magazine {
width: 100%;
}
.magazine2, .magazine3 {
margin-top: 40px;
}
.magazine-text span:last-of-type {
margin-top: 10px;
font-size: 14px;
}
.magazine-text span:nth-of-type(2) {
font-size: 18px;
}
.magazine-photo {
width: 100%;
margin: 0 auto;
}
.magazine-text {
padding: 5px 0 5px 15px;
margin-top: 10px;
} .application-title h2 {
font-size: 16px;
letter-spacing: .05em;
}
.application-title span {
font-size: 20px;
}
.application-title {
padding-top: 25px;
}
.application-title p {
width: 95%;
line-height: 1.5;
padding: 35px 0 0;
letter-spacing: .05em;
}
.application-title p span {
line-height: 1.5;
font-size: 26px;
letter-spacing: .05em;
}
.top-application-over {
width: 95%;
}
form.myForm div.submit {
margin-top: 20px !important;
}
}