/* CSS Document */ /*------------------------------------------------------ header ------------------------------------------------------*/ header {} header h1 {} @media (min-width: 768px) { header { height: 552px; background: url("../top/bg_top-visual.jpg") no-repeat center center; background-size: cover;} header h1 { width: 1044px; height: 580px; top: 15px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../top/title_main.png") no-repeat left top; background-size: 100% auto; margin-left: auto; margin-right: auto; position: relative; z-index: 1;} } @media (max-width: 767px) { header { height: 0; padding-bottom: 138.559%; background: url("../top/bg_top-visual-sp.jpg") no-repeat center center; background-size: cover;} header h1 { width:100%; height: 0; padding-bottom: 150%; top: -8px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../top/title_main_sp.png") no-repeat center top; background-size: 100% auto; margin-left: auto; margin-right: auto; position: relative; z-index: 1;} } /*------------------------------------------------------ ------------------------------------------------------*/ @media (min-width: 768px) { main { position: relative; top: -184px; margin-bottom: -184px;} } @media (max-width: 767px) { main { position: relative; top: -130px; margin-bottom: -130px;} } /*------------------------------------------------------ introduction ------------------------------------------------------*/ #introduction { color: #fff; position: relative;} #introduction::before , #introduction::after { content: ''; position: absolute; width: calc((100% - 1098px) / 2); height: 100%; border-top: 368px solid #23a7d5; background-color: #444a9c; } #introduction::after { right: 0; top: 0; transform: rotate(-180deg); background-color: #b18abc;} #introduction .container { background: url("../top/img_top-cross.png") no-repeat center top; background-size: 100% auto;} #introduction h2 { text-align: center; } #introduction h2 span { border-bottom: 1px solid #fff; padding-bottom: 2px; display: inline-block;} #introduction h2 span:first-child { margin-bottom: 10px;} #introduction .text { text-align: center; margin-bottom: 40px;} @media (min-width: 768px) { #introduction .container { height: 830px; padding-top: 215px;} #introduction h2 { font-size: 2.4rem; margin-bottom: 48px;} #introduction h2 span:first-child { letter-spacing: 4px; } #introduction h2 span:last-child { letter-spacing: 12px; } #introduction nav { width: 100%; max-width: 910px; border: 1px solid #fff; margin-left: auto; margin-right: auto;} #introduction nav ul li { width: calc(99.9% / 3); text-align: center; font-size: 1.6rem;} #introduction nav ul li:not(:last-child) { border-right: 1px solid #fff;} #introduction nav ul li a { color: #fff; text-decoration: none; padding: 8px 5px; display: block; height: 100%;} #introduction nav ul li a:hover { background-color: #fff; color: #444a9c; } } @media (max-width: 767px) { #introduction .container { background-size: auto 100%; margin-left: 0; margin-right: 0; padding-top: 135px; padding-bottom: 200px; background-position: center top -40px; } #introduction h2 { font-size: 2rem; margin-bottom: 30px;} #introduction h2 span:last-child { letter-spacing: 4px; } #introduction .text { width: 85%; text-align: left; margin: 0 auto;} #introduction nav { display: none;} } /*------------------------------------------------------ team ------------------------------------------------------*/ #team { margin-bottom: 50px; } #team h2 { text-align: center; margin-bottom: 40px;} #team h2 img { width: 100%; max-width: 400px;} #team h2 + .text { font-size: 1.4rem; margin-bottom: 30px;} #teamSlider { background-color: #ccc; margin-bottom: 15px; /* padding: 20px 0 14px; */ padding: 50px 0 45px;} #teamSlider .sliderBody {} #teamSlider .sliderBody li { border: 7px solid transparent;} #teamSlider .sliderBody img { margin-bottom: 10px;} #teamSlider .sliderBody li a { color: #000; text-decoration: none;} #teamSlider .sliderBody li p { font-size: 1.8rem; text-align: center; white-space: nowrap;} #teamSlider .sliderBody li p strong { font-size: 2rem;} #teamSlider .slick-arrow { width: 18px; height: 38px; left: -30px; position: absolute; top: calc(50% - 34px);} #teamSlider .slick-arrow:last-of-type { right: -30px; left: auto; transform: rotate(-180deg);} /* slick初期化前のチラつき防止（slidesToShowと同じ枚数で横並びにしておく） */ #teamSlider .sliderBody:not(.slick-initialized) { display: flex; overflow: hidden;} #teamSlider .sliderBody:not(.slick-initialized) li { flex: 0 0 20%; min-width: 0;} @media (max-width: 768px) { #teamSlider .sliderBody:not(.slick-initialized) li { flex-basis: calc(100% / 3);} } @media (max-width: 480px) { #teamSlider .sliderBody:not(.slick-initialized) li { flex-basis: 50%;} } /* #teamSlider a{ pointer-events: none; } */ #team .more { font-size: 1.4rem; font-weight: bold; text-align: right;} #team .more a { color: #444a9c; text-decoration: none;} #team .more a::after { content: ''; width: 24px; height: 24px; background: url("../top/icon_arrow-2.png") no-repeat left top; background-size: 100% auto; display: inline-block; vertical-align: -6px; margin-left: 6px; } #teamSlider .comingsoon .text { text-align: center; color: #444a9c; } @media (min-width: 768px) { /* #team { position: relative; top: -75px;} */ #team h2 + .text { max-width: 800px; margin-left: auto; margin-right: auto;} #teamSlider .sliderBody.container { max-width: 990px;} #teamSlider .sliderBody li a:hover { text-decoration: underline; } #teamSlider .slick-arrow:hover { opacity: 0.8;} #team .more a:hover { text-decoration: underline;} #teamSlider .comingsoon .text { font-size: 1.8rem; } } @media (max-width: 767px) { #team { position: relative; top: -20px; margin-bottom: 20px;} #team h2 { margin-left: 15px; margin-right: 15px;} #team h2 + .text { width: calc(100% - 30px); margin-left: auto; margin-right: auto; } #teamSlider .sliderBody { margin-left: 30px; margin-right: 30px;} #teamSlider .sliderBody li p { font-size: 1.2rem;} #teamSlider .sliderBody li p strong { font-size: 1.6rem;} #teamSlider .slick-arrow {left: -23px;} #teamSlider .slick-arrow:last-of-type { right: -23px; left: auto; } #teamSlider .comingsoon .text { font-size: 1.6rem; } } /*------------------------------------------------------ record ------------------------------------------------------*/ #record { margin-bottom: 70px;} #record div.title { background-color: #444a9c; margin-bottom: 45px;} #record div.title .container { background: url("../top/bg_record.jpg") no-repeat center center; background-size: cover;} #record div.title h2 {} #record div.title h2 img { width: 100%; max-width: 164px;} #record > .container {} #record .lead { text-align: center; margin-bottom: 50px; color: #444a9c;} #record .lead span { border-bottom: 1px solid #444a9c; padding-bottom: 8px;} #record .lead + .title { font-size: 1.8rem; text-align: center; margin-bottom: 20px;} #record table {} #record table tr {} #record table th { font-weight: normal; text-align: left;} #record table td {} @media (min-width: 768px) { #record div.title .container { height: 200px; max-width: 1100px;} #record div.title h2 { padding-top: 95px; padding-left: 130px; } #record .lead { font-size: 2rem; letter-spacing: 1px; } #record table { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 1.8rem;} #record table tr { border-bottom: 3px solid #fff;} #record table th { letter-spacing: 2px; width: 150px; } #record table td { letter-spacing: 1px;} } @media (max-width: 767px) { #record div.title .container { height: 180px; background-size: cover;} #record div.title h2 { padding-top: 80px; text-align: center;} #record .lead { font-size: 1.8rem; } #record .lead span { display: inline-block; font-weight: bold;} #record table { font-size: 1.6rem; } #record table th { display: list-item; list-style-type: none; width: 100%; font-weight: bold;} #record table td { display: list-item; list-style-type: none; width: 100%; margin-bottom: 10px; } } /*------------------------------------------------------ support ------------------------------------------------------*/ #support { background: #ffe36c; background: -moz-linear-gradient(top, #ffe36c 0%, #ffffdd 31%, #ffffff 45%); background: -webkit-linear-gradient(top, #ffe36c 0%,#ffffdd 31%,#ffffff 45%); background: linear-gradient(to bottom, #ffe36c 0%,#ffffdd 31%,#ffffff 45%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe36c', endColorstr='#ffffff',GradientType=0 ); margin-bottom: 70px;} #support .container::before { content: ''; background: url("../top/img_support.png") no-repeat left top; width: 378px; height: 278px; background-size: 100% auto; position: absolute; left: 0; top: 0;} #support .container {} #support h2 { margin-bottom: 40px;} #support h2 img { width: 100%; max-width: 392px;} #support .colWrap:first-of-type { margin-bottom: 50px;} #support .colWrap:first-of-type .body {} #support .colWrap:first-of-type .text { color: #444a9c; margin-bottom: 25px;} #support .colWrap:first-of-type a { text-decoration: none; } #support .colWrap:first-of-type a:hover { opacity: 0.8; } #support .colWrap:first-of-type .btn { background-color: #23a7d5; color: #fff; text-decoration: none; text-align: center; display: block; padding: 12px 5px;} #support .colWrap:first-of-type figure {} #support .colWrap:first-of-type figure img { position: relative; z-index: 0;} #support .colWrap:last-of-type {} #support .colWrap:last-of-type .body {} #support .colWrap:last-of-type h3 { margin-bottom: 25px;} #support .colWrap:last-of-type h3 img { width: 100%; max-width: 380px;} #support .colWrap:last-of-type .text { font-size: 1.4rem; line-height: 1.6;} #support .colWrap:last-of-type .text a { color: #23a7d5;} #support .colWrap:last-of-type .map { background: url("../top/img_map.png") no-repeat left top; background-size: 100% auto; width: 220px; height: 132px;} #support .colWrap:last-of-type .map a { font-size: 1.4rem; text-decoration: none; color: #000; padding: 55px 0 0 25px; display: inline-block; } #support .body { text-align: right;} #support .body .info { position: relative; text-align: left; display: inline-block; margin-bottom: 10px;} #support .body .info p { font-weight: bold; font-size: 1.6rem;} #support .body .info table { font-size: 1.4rem;} #support .body .info table tr {} #support .body .info table th { text-align: right; font-weight: normal;} #support .body .info table td {} @media (min-width: 768px) { #support .container { padding-top: 40px; } #support .container::before { top: -52px;} #support h2 { margin-left: 90px;} #support .colWrap:first-of-type { max-width: 990px; margin-left: auto; margin-right: auto; -webkit-align-items: flex-end; align-items: flex-end;} #support .colWrap:first-of-type .body { width: calc((100% - 347px) - 50px);} #support .colWrap:first-of-type .btn { font-size: 1.6rem;} #support .colWrap:first-of-type figure { width: 347px;} #support .colWrap:last-of-type { margin-left: 20px; margin-right: 20px;} #support .colWrap:last-of-type .body { width: calc((100% - 400px) - 40px);} #support .colWrap:last-of-type .map { } #support .colWrap:last-of-type .map a:hover { text-decoration: underline;} #support .body .info {} #support .body .info p {} #support .body .info table {} #support .body .info table tr {} #support .body .info table th {} #support .body .info table td {} } @media (max-width: 767px) { #support .container { padding-top: 50px; } #support .container::before { display: none;} #support h2 { width: 90%; margin-left: auto; margin-right: auto; text-align: center;} #support .colWrap:first-of-type .body { width: 100%; margin-bottom: 30px;} #support .colWrap:first-of-type .btn { font-size: 1.6rem;} #support .colWrap:first-of-type figure { width: 100%;} #support .colWrap:last-of-type .body { width: 100%; margin-bottom: 20px;} #support .colWrap:last-of-type .map { margin-left: auto; margin-right: auto;} #support .body .info {} #support .body .info p {} #support .body .info table {} #support .body .info table tr {} #support .body .info table th {} #support .body .info table td {} } /* ----------------------------------------------- donate ----------------------------------------------- */ #donate { background: #e6e9f5; position: relative; margin-bottom: 0; z-index: 0; overflow: hidden; } #donate::after { content: ''; position: absolute; bottom: 0; right: 0; background: url(../top/bg_donate.jpg) no-repeat; background-position: center; background-size: cover; opacity: 0.61; z-index: -1; } #donate h2 { margin-bottom: 4px; } #donate h3 { font-weight: normal; margin-bottom: 10px; } #donate p { max-width: 488px; line-height: 1.715; margin-bottom: 21px; } #donate a { display: block; padding: 12px; max-width: 495px; text-decoration: none; text-align: center; color: #fff; background: linear-gradient( to right, rgba(98,164,209,0) 0, rgba(98,164,209,1) 53%, rgba(98,164,209,0) 100%); } @media (min-width: 768px) { #donate div.container { padding: 28px 309px 26px 55px; } #donate::before { content: ''; position: absolute; bottom: 0; left: 0; background: #e6e9f5; width: 54.429%; height: 100%; transform: skewX(-30deg); transform-origin: bottom right; z-index: 0; } #donate::after { width: 45.572%; height: 268px; } #donate h2 { max-width: 736px; } #donate h3 { font-size: 2.4rem; } #donate p { font-size: 1.4rem; } #donate a { font-size: 1.6rem; } } @media (max-width: 767px) { #donate div.container { padding: 47px 0 107px; } #donate::after { width: 100%; height: 93px; } #donate h2 { max-width: 321px; padding-left: 10px; } #donate h3 { font-size: 2.0rem; padding-left: 10px; } #donate p { font-size: 1.5rem; padding-left: 10px; } #donate a { margin: 0 auto; } #donate a { font-size: 1.6rem; } } /* ----------------------------------------------- anniversary ----------------------------------------------- */ #anniversary { background: #fff; margin-bottom: 0; position: relative; } #anniversary div.container { display:-webkit-box; display:-ms-flexbox; display:flex; } #anniversary div.container .left { max-width: 190px; } #anniversary div.container .left figure { max-width: 102px; margin: 0 auto 20px; } #anniversary div.container .left a { display: block; width: 190px; text-align: center; color: #fff; text-decoration: none; padding: 8px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #anniversary div.container .right h2 { font-weight: normal; letter-spacing: 0.014em; } @media (min-width: 768px) { #anniversary::before { content: ''; position: absolute; left: 0; top: 0; background: linear-gradient(to right, #474b97, #a588b8); width: 54.429%; height: 100%; transform: skewX(-30deg); transform-origin: top right; } #anniversary div.container { padding: 55px 0 30px 150px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #anniversary div.container .right { width: calc( (100% - 190px) - 285px ); } #anniversary div.container .right h2 { font-size: 2.1rem; line-height: 1.333; margin-bottom: 30px; } #anniversary div.container .right p { font-size: 1.4rem; line-height: 1.715; } #anniversary a { font-size: 1.6rem; } } @media (max-width: 767px) { #anniversary { background: linear-gradient(to right, #474b97, #a588b8); } #anniversary div.container { padding: 45px 0 25px; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #anniversary div.container .left a { border-left: 1px solid #fff; border-right: 1px solid #fff; } #anniversary div.container .right { margin-bottom: 20px; } #anniversary div.container .right h2 { font-size: 1.9rem; color: #fff; letter-spacing: 0.014em; margin-bottom: 25px; } #anniversary div.container .right p { font-size: 1.5rem; line-height: 1.6; color: #fff; } #anniversary a { font-size: 1.6rem; } } } /*------------------------------------------------------ interview ------------------------------------------------------*/ #interview h2 { } #interview { margin: 0px auto; } #interview h2 { text-align: center; margin-bottom: 50px; color: #444a9c;} #interview h2 span { border-bottom: 1px solid #444a9c; padding-bottom: 8px;} #interview h3 { font-size: 1.6rem; font-weight: bold; margin-bottom: 15px; } #interview .text { font-size: 1.4rem; } #interview section { margin-bottom: 30px; } #interview > section { margin-bottom: 80px; } #interview .director { margin-bottom: 50px; } #interview .l_col-2 .position { color: #444a9c; } #interview .l_col-2 .name { color: #333; margin-bottom: 10px; position: relative; padding-bottom: 3px; } #interview .l_col-2 .name::after { position: absolute; bottom: 0px; left: 0px; content: ''; height: 1px; width: 100%; background: #444a9c; } #interview .l_col-2 .nameEnglish { color: #333; } #interview .l_col-2 .textOpenBtn { width: 200px; height: 40px; border: 1px solid #444a9c; color: #444a9c; font-size: 1.4rem; display: -webkit-flex; display: flex; -webkit-justify-content: center;justify-content: center; -webkit-align-items: center; align-items: center; } #interview .l_col-2 .nameWrap{ width: 100%; } #interview .l_col-2 .textOpenBtn:hover { background: #444a9c; color: #fff; } #interview .l_col-2 .textOpenBtn.open { background: #444a9c; color: #fff; } #interview .textWrap { display: none; margin-top: 30px; } #interview .textWrap.open { display: block; } #interview .textWrap > section:last-child{ margin: 0px; } @media (min-width: 768px) { #interview { max-width: 800px; } #interview h2 { font-size: 2rem; letter-spacing: 1px; } #interview .l_col-2 { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } #interview .l_col-2 > div { width: 380px; } #interview .l_col-2 > div:first-child { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } #interview .l_col-2 .position { font-size: 2.0rem;margin-bottom: 15px; } #interview .l_col-2 .name { font-size: 3.0rem; } #interview .l_col-2 .nameEnglish { font-size: 1.4rem; margin-bottom: 30px; } } @media (max-width: 767px) { #interview { padding: 0px 15px; } #interview h2 { font-size: 1.8rem; } #interview h2 span { display: inline-block; font-weight: bold;} #interview .l_col-2 { display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; margin-bottom: 20px; text-align: center; } #interview .l_col-2 > div:last-child { margin-bottom: 15px; } #interview .l_col-2 .position { font-size: 2.0rem; margin-bottom: 10px; } #interview .l_col-2 .name { font-size: 3.0rem; } #interview .l_col-2 .nameEnglish { font-size: 1.4rem; margin-bottom: 20px; } #interview .l_col-2 .textOpenBtn { margin: 0px auto; } } /*------------------------------------------------------ ------------------------------------------------------*/ @media (min-width: 768px) { } @media (max-width: 767px) { }