@charset "utf-8";

body p,a,li,th,td { 
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}
p { font-size: 16px; line-height: 1.5em; }
li { font-size: 16px; line-height: 1.5em; }
th { font-size: 16px; line-height: 1.5em; }
td { font-size: 16px; line-height: 1.5em; }
a { font-size: 16px; line-height: 1.5em; text-decoration: none; transition: 0.5s; }
a:hover { opacity: 0.6 }

body { user-select: none; }
#wow_wrap { overflow: hidden; }



/*====================================================================
header
====================================================================*/
.menu_wrap { 
position: fixed;
width: 100%;
background: rgba(255, 255, 255, 0.95);
z-index: 80;
}

.menu_content { 
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}
.menu_content .logo img { 
width: 100%;
max-width: 300px;
}

.menu_content .two_box { 
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.menu_content .two_box .menu_top { 
width: 49%;
}
.menu_content .two_box .menu_top:last-child { 
margin-left: 2%;
}
.menu_content .menu_top a { 
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
color: #fff;
background: #004471;
padding: 5px;
border-radius: 20px;
}

/*　ハンバーガーメニューボタン　*/
.hamburger_re {
display : block;
position: absolute;
z-index : 100;
right : 15px;
top   : 15px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger_re span {
display : block;
position: absolute;
width   : 30px;
height  : 2px ;
left    : 6px;
background : #0a23fa;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger_re span:nth-child(1) {
top: 10px;
}
.hamburger_re span:nth-child(2) {
top: 20px;
}
.hamburger_re span:nth-child(3) {
top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger_re.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#0a23fa;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}
.hamburger_re.active span:nth-child(2),
.hamburger_re.active span:nth-child(3) {
top: 16px;
background :#0a23fa;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
position: fixed;
z-index : 90;
top  : 0;
left : 0;
color: #fff;
background: rgba(255, 255, 255, 0.95);
text-align: center;
width: 100%;
height: 100vh;
transform: translateX(100%);
transition: all 0.6s;
}

nav.globalMenuSp .wrap { 
padding: 80px 15px;
}

nav.globalMenuSp .menu_logo { 
max-width: 600px;
margin: 0 auto 30px auto;
}
nav.globalMenuSp .menu_logo img { 
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
}

nav.globalMenuSp ul {
display: flex;
justify-content: center;
align-items: flex-end;
max-width: 600px;
margin: 0 auto 30px auto;
}
nav.globalMenuSp ul li {
width: 49%;
list-style-type: none;
padding: 0;
transition: .4s all;
border-bottom: 1px solid #004471;
padding-bottom: 15px;
}
nav.globalMenuSp ul li:last-child {
margin-left: 2%;
}
nav.globalMenuSp ul li a {
display: block;
text-align: center;
color: #111;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
opacity: 100;
display: block;
transform: translateX(0%);
}

@media (max-width: 400px) {
.hamburger_re { top: 12px; }
.menu_content .logo img { max-width: 250px; }
nav.globalMenuSp ul li a { font-size: 14px; }
}



/*====================================================================
footer
====================================================================*/
footer .logo { 
padding: 80px 15px;
}
footer .logo a { 
display: block;
max-width: 350px;
margin: 0 auto;
}
footer .logo img { 
width: 100%;
}

footer .copyright { 
border-top: 1px solid #111;
padding: 15px 15px 80px 15px;
}
footer .copyright p { 
font-size: 14px;
text-align: center;
}

@media (max-width: 767px) {
footer .copyright p { font-size: 12px; }
}
@media (max-width: 450px) {
footer .logo a { max-width: 300px; }
footer .copyright { padding: 15px 15px 70px 15px; }
footer .copyright p { font-size: 10px; }
}



/*====================================================================
キービジュア・導入文・代表メッセージ
====================================================================*/
.introduction_01 { 
min-height: 100vh; /* Fallback */
min-height: calc(var(--vh, 1vh) * 100);
position: relative;
margin-bottom: 80px;
}    

.typing { 
width: 100%;
max-width: 1000px;
margin: 0 auto;
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: justify;
}
.typing h2 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 900; /* <weight>: Use a value from 100 to 900 */
line-height: 1.2em;
font-size: var(--fontsize);
color: #fff;
font-feature-settings: "palt";
display: initial;
margin: 0;
}

#text .t-caret { display: none!important; }
/* 
#text .t-caret { 
color: #0a23fa; 
animation: blinking .3s ease-in-out infinite alternate;
z-index: 1;
}
@keyframes blinking {
0% { opacity: 0; }
100% { opacity: 1; }
}   
*/
.typing .t-container .scroll { 
display: block;
text-align: center;
color: #0a23fa; 
animation: scroll .5s ease-in-out infinite alternate;
z-index: 1;   
}
@keyframes scroll {
0% { opacity: 0; }
100% { opacity: 1; }
}

.typing .t-container { color: #0a23fa; }
.typing .t-container .color_01 { display: inline-block; background: #004471; color: #fff; padding: 0 5px 5px 5px; }
.typing .t-container .color_02 { display: inline-block; background: #00aaff; color: #fff; padding: 0 5px 5px 5px; }
.typing .t-container .color_03 { display: inline-block; background: #E9649D; color: #fff; padding: 0 5px 5px 5px; }
.typing .t-container .line_01 { background: linear-gradient(transparent 70%, #ffe032 20%); }



/*====================================================================
会社紹介
====================================================================*/
.back_c01 { background: #1c2dbc; }
.back_c02 { background: #ff9800; }

.page_wrap { padding: 80px 15px; }
.page_wrap02 { padding: 60px 15px 80px 15px; }
.page_wrap03 { padding: 60px 15px 130px 15px; }
.page_content { max-width: 1200px; margin: 0 auto; }




.play_wrap {
padding: 80px 0 0 0;
}
.page_content .main_title { 
max-width: 1000px;
margin: -200px auto 0 auto;
position: relative;
}
.page_content .main_title img {
display: block;
margin: 0 auto;
}
.page_content .main_title .text { 
position: absolute;
top: 0;
left: 0;
}
.page_content .title_sp {
display: none;
}
@media (max-width: 600px) {
.page_content .title_pc { display: none; }
.page_content .title_sp { display: block; }
}



.page_content .movie_box { 
max-width: 700px;
margin: 0 auto 80px auto;
}
.movie-content-wrap { 
position: relative; 
width: 100%; 
padding-top: 56.25%;
}
.movie-content-wrap iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
.movie-content-wrap img { 
position: absolute; 
top: 0; 
left: 0; 
cursor: pointer; 
width: 100%; 
max-width: 700px; 
}



.page_content .line { 
max-width: 700px;
margin: 0 auto;
border-bottom: 1px solid #fff;
padding-top: 40px;
margin-bottom: 80px;
}

.page_content .text_box { 
max-width: 700px;
margin: 0 auto;
}

.page_content .text_box h4 { 
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
font-size: 24px;
line-height: 1.5em;
color: #fff;
margin-bottom: 5px;
position: relative;
overflow: hidden;
}
.page_content .text_box h4 .back { 
background: #1c2dbc;
padding: 5px 10px 5px 0;
}
.page_content .text_box h4 .line { 
width: 100%;
border-top: 1px solid #fff;
position: absolute;
top: 0.75em;
}

.page_content .text_box h3 { 
position: relative;
max-width: 500px;
margin: 0 auto;
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 40px;
line-height: 1.2em;
color: #fff;
margin-bottom: 30px;
}
.page_content .text_box h3 .decoration_01 { position: absolute; top: 0; right: 0; }
.page_content .text_box h3 .decoration_02 { position: absolute; bottom: 0; left: 0; }
.page_content .text_box h3 .decoration_01 img { width: 100px; }
.page_content .text_box h3 .decoration_02 img { width: 50px; }
.page_content .text_box h3 .text { position: relative; text-align: center; padding: 30px 0; z-index: 2; }

.page_content .text_box p { 
font-size: 18px;
color: #fff;
line-height: 1.7em;
margin-bottom: 15px;
}



.sup_toggle {
display: none;
}

.sup_Label01 {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
font-size: 20px;
line-height: 1.5em;
text-align: center;
padding: 15px;
display: block;
cursor: pointer;
max-width: 700px;
margin: 25px auto 0 auto;
color: #fff;
background: #37bef0;
}
.sup_Label01::before{
content:"";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top: calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
.sup_Label01,
.sup_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.sup_toggle:checked + .sup_Label01 + .sup_content {
height: auto;
padding: 20px 15px;
transition: all .3s;
background: #f0f8ff;
}
.sup_toggle:checked + .sup_Label01::before {
transform: rotate(-45deg) !important;
}

.sup_Label02 {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
font-size: 20px;
line-height: 1.5em;
text-align: center;
padding: 15px;
display: block;
cursor: pointer;
max-width: 700px;
margin: 25px auto 0 auto;
color: #F15A22;
background: #fff;
}
.sup_Label02::before{
content:"";
width: 10px;
height: 10px;
border-top: 2px solid #F15A22;
border-right: 2px solid #F15A22;
-webkit-transform: rotate(45deg);
position: absolute;
top: calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
.sup_Label02,
.sup_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}

.sup_content {
max-width: 700px;
margin: 0 auto;
height: 0;
padding: 15px 15px 0 15px;
overflow: hidden;
height: 150px;
}
.sup_content::before {
position: absolute;
display: block;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
.sup_toggle:checked + .sup_Label01 + .sup_content::before { background: none; }
.sup_toggle:checked + .sup_Label02 + .sup_content::before { background: none; }

.sup_wrap_01 .sup_content { 
background: #f0f8ff;
}
.sup_wrap_02 .sup_content { 
background: #ffe4c4;
}

.sup_toggle:checked + .sup_Label02 + .sup_content {
height: auto;
padding: 20px 15px;
transition: all .3s;
background: #ffe4c4;
}
.sup_toggle:checked + .sup_Label02::before {
transform: rotate(-45deg) !important;
}

.sup_content .area_box { 
border-bottom: 1px dashed #111;
margin-bottom: 25px;
padding-bottom: 40px;
}
.sup_content .area_box:last-child { 
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.sup_content h3 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 40px;
line-height: 1.2em;
text-align: center;
margin-bottom: 10px;
}
.sup_content h3 br { 
display: none;
}
.sup_content p { 
line-height: 1.7em;
margin-bottom: 20px;
}
.sup_content p strong { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 20px;
}
.sup_content p .point_01 { 
display: inline-block;
font-weight: bold;
color: #fff;
background: #ff9800;
margin-right: 10px;
margin-bottom: 10px;
padding: 2px 5px;
}
.sup_content .photo img { 
width: 100%;
}
.sup_content .one_box { 
margin-bottom: 30px;
}
.sup_content .two_box { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.sup_content .two_box .box { width: 49%; }
.sup_content .two_box .box:last-child { margin-left: 2%; }
.sup_content .two_box .small { font-size: 12px; }
.sup_content .two_box .box img { width: 100%; }

.sup_content .about p { 
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
line-height: 2em;
color: #111; 
}
.sup_content .about p strong { 
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
display: block;
color: #004471;
border-bottom: 1px dashed #004471;
margin-bottom: 5px;
padding-bottom: 5px;
}
.sup_content .about .name { text-align: right; margin-top: 20px; }
.sup_content .about .name img { border-bottom: 1px solid #111; padding-bottom: 10px; }


@media (max-width: 767px) {
.page_content .text_box h3 .decoration_01 img { width: auto; }
.page_content .text_box h3 .decoration_02 img { width: auto; }
}
@media (max-width: 500px) {
.sup_content .two_box { display: block; }
.sup_content .two_box .box { width: 100%; }
.sup_content .two_box .box:last-child { margin-left: 0; }
}
@media (max-width: 450px) {
.page_content .text_box p { font-size: 16px; }
.page_content .text_box h3 { font-size: 30px; }
.sup_content h3 { font-size: 24px; }
.sup_content h3 br { display: block; }
.sup_content p strong { font-size: 18px; }
}



/*====================================================================
個性的なSTAFFたち
====================================================================*/
.staff_back { 
background: #ffe032;
margin-bottom: 60px;
padding: 80px 0;
}
.staff_wrap { 
padding: 0 15px;
}
.staff_content { 
max-width: 800px;
margin: 0 auto;
}



.staff_content .main_title { 
max-width: 800px;
margin: -150px auto 60px auto;
position: relative;
}
.staff_content .main_title img {
display: block;
margin: 0 auto;
}
.staff_content .main_title .text { 
position: absolute;
top: 0;
left: 0;
}
.staff_content .title_sp {
display: none;
}
@media (max-width: 600px) {
.staff_content .title_pc { display: none; }
.staff_content .title_sp { display: block; }
}

.more_content { 
max-width: 700px;
margin: 60px auto 0 auto;
}
.more_content .more img {
width: 100%;
}



.slick-slide {
margin: 0 15px;
}
.slick-slide img {
width: 100%;
height: auto;
padding: 10px 0;
}
.slider {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.slider img {
max-width: 300px;
}
.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
transform: rotate(-5grad);
}
.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
transform: none;
}
.slider_shadow img { 
display: block; 
margin: 30px auto 0 auto;
}



/*====================================================================
ハピテクヒストリー
====================================================================*/
.history_wrap {  
padding: 0 15px;
}
.history_content { 
max-width: 700px;
margin: 0 auto;
}

.history_content .title h3 img { 
display: block;
margin: 0 auto 20px auto;
}



.hi_wrap { 
position: relative;
max-width: 700px;
margin: 0 auto;
}
.hi_toggle {
display: none;
}
.hi_Label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 30px;
line-height: 1.5em;
text-align: center;
padding: 15px;
display: block;
color: #fff;
background: #00aaff;
cursor: pointer;
box-shadow: 0.2rem 0.2rem 1.0rem rgba(0,0,0, 0.15);
width: 100%;
max-width: 700px;
margin: 0 auto;
border-radius: 20px;
position: absolute;
z-index: 3;
bottom: -60px;
}
.hi_Label::before{
content:"";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top: calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
.hi_Label,
.hi_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.hi_content {
height: 300px;
margin-bottom: 160px;
padding: 0 15px;
overflow: hidden;
}
.hi_toggle:checked + .hi_Label + .hi_content {
height: auto;
padding: 20px 15px;
transition: all .5s;
background: #fff;
}
.hi_toggle:checked + .hi_Label::before {
transform: rotate(-45deg) !important;
}



.sec-box { padding: 20px 15px 0 15px; }
.content-width { max-width: 700px; padding: 0; }
.mod-flow-list { margin-top: 0; padding: 0; }
#company-history .mod-flow-list .item-title { font-size: 40px; }
.mod-flow-list .item-box .txt-box p { line-height: 1.7em; margin-bottom: 2em; }

@media screen and (min-width: 641px) { 
#company-greeting .item-box { margin-left: auto; } 
}
@media screen and (max-width: 640px){
.mod-flow-list { padding: 0; }
.mod-flow-list .left { width: 100px; }
#company-history .mod-flow-list .item-title { font-size: 30px; }
}
@media screen and (max-width: 450px){
.mod-flow-list .item-box .txt-box p { font-size: 14px; }
.hi_Label { font-size: 24px; }
}



/*====================================================================
選考の流れ・募集要項
====================================================================*/
.recruit_wrap { 
background: #f0f8ff;
padding: 80px 15px;
}
.recruit_content { 
max-width: 700px;
margin: 0 auto;
}

.recruit_content h3 {
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 40px;
line-height: 1.5em;
color: #0a23fa;
text-align: center;
margin-bottom: 20px;
}



.recruit_content .flow ul { 
background: #fff;
padding: 30px 15px 60px 15px;
}
.recruit_content .flow li { 
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 1.7em;
}
.recruit_content .flow li .no { 
font-size: 20px;
font-weight: bold;
line-height: 1em;
color: #fff;
background: #00aaff;
border-radius: 50%;
margin-right: 10px;
padding: 10px 15px;
}
.recruit_content .flow li .back { 
width: 100%;
border: 1px solid #00aaff;
border-radius: 10px;
padding: 10px;
}
.recruit_content .flow .delta {
background: #00aaff;
width: 60px;
height: 30px;
clip-path: polygon(0 0, 100% 0%, 50% 100%);
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%);
margin: 15px auto;
}

.accordion h4 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 30px;
line-height: 1.5em;
color: #0a23fa;
text-align: center;
}
.accordion th { 
width: 100px;
font-weight: bold;
background: none;
border-bottom: 2px solid #004471;
padding: 15px 10px;
}
.accordion td { 
border-bottom: 2px solid #00aaff;
padding: 15px 10px;
}
.accordion .indent-1 { 
padding-left: 1em;
text-indent: -1em;
}

.accordion .contact_btn a { 
display: block;
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 24px;
line-height: 1.5em;
text-align: center;
color: #fff;
background: #004471;
border-radius: 15px;
margin-top: 30px;
padding: 15px;
}

.accordion .banner { 
margin-top: 30px;
}

.accordion .ac_content:last-child { 
margin-bottom: 0;
}

.ac_toggle {
display: none;
}
.ac_Label {
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 30px;
line-height: 1.5em;
text-align: center;
padding: 15px;
display: block;
color: #fff;
background: #00aaff;
cursor: pointer;
box-shadow: 0.2rem 0.2rem 1.0rem rgba(0,0,0, 0.15);
}
.ac_Label::before{
content:"";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
position: absolute;
top: calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
.ac_Label,
.ac_content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.ac_content {
height: 0;
margin-bottom: 30px;
padding: 0 15px;
overflow: hidden;
}
.ac_toggle:checked + .ac_Label + .ac_content {
height: auto;
padding: 20px 15px;
transition: all .3s;
background: #fff;
}
.ac_toggle:checked + .ac_Label::before {
transform: rotate(-45deg) !important;
}

@media (max-width: 767px) {
.accordion th { font-size: 14px; }
.accordion td { font-size: 14px; }
.accordion td a { font-size: 14px; }
}
@media (max-width: 450px) {
.recruit_content h3 { font-size: 30px; }
.recruit_content .flow li { font-size: 14px; }
.ac_Label { font-size: 24px; }
}



/*====================================================================
追従メニュー
====================================================================*/
#re-fixed-menu {
position: fixed;
width: 100%;
bottom: 0px;
font-size: 0;
opacity: 0.95;
z-index: 3;
}

#re-fixed-menu ul {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

#re-fixed-menu li {
justify-content: center;
align-items: center;
width: 50%;
padding: 0;
margin: 0;
font-size: 14px;
background: #fff;
border-top: 1px solid #004471;
border-right: 1px solid #004471;
}

#re-fixed-menu li a {
font-family: "Noto Sans JP", sans-serif!important;
font-weight: 600; /* <weight>: Use a value from 100 to 900 */
font-size: 24px;
color: #004471;
text-align: center;
display: block;
font-size: 20px;
width: 100%;
padding: 20px 15px;
}

@media (max-width: 450px) {
#re-fixed-menu li a { font-size: 16px; padding: 15px 15px; }
}



#page-top a {
position: fixed;
bottom: 100px;
right: 15px;
width: 50px;
height: 50px;
text-decoration: none;
color: #fff;
background-color: #004471;
display: block;
font-size: 30px;
text-align: center;
border: 2px solid #fff;
border-radius: 50%;
}

@media (max-width: 450px) {
#page-top a { bottom: 70px; }
}



/*====================================================================
ハピテクの夜明け profile
====================================================================*/
.dawn_wrap { 
background-image: url(../../renewal2024/img/dawn_back.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 245px;
margin-top: 70px;
padding: 0 15px;
}
.dawn_content { 
position: relative;
max-width: 1200px;
height: 245px;
margin: 0 auto;
}
.dawn_content h2 img { 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.staff_title { 
background: #ffe032;
margin-top: 70px;
padding: 0 15px;
}
.staff_title h2 img { 
display: block;
width: 100%;
max-width: 450px;
margin: 0 auto;
padding-top: 15px;
}



.profile_back .back_btn_01 { 
max-width: 1000px;
margin: 0 auto;
padding-top: 20px;
text-align: right;
}
.profile_back .back_btn_01 a { 
font-size: 20px;
color: #fff;
background: #004471;
border: 1px solid #004471;
padding: 5px 15px;
border-radius: 50px;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
}
.profile_back .back_btn_02 { 
max-width: 300px;
margin: 80px auto 0 auto;
}
.profile_back .back_btn_02 a { 
display: block;
font-size: 30px;
text-align: center;
color: #fff;
background: #004471;
padding: 10px 10px;
border-radius: 50px;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
}



.profile_back { 
background: #ffe032;
padding: 0 15px 80px 15px;
}
.profile_content { 
max-width: 1000px;
margin: 0 auto;
}

.profile_content #profile_01 { display: block; height: 80px; }
.profile_content #profile_02 { display: block; height: 80px; }
.profile_content #profile_03 { display: block; height: 80px; }
.profile_content #profile_04 { display: block; height: 80px; }
.profile_content #profile_05 { display: block; height: 80px; }
.profile_content #profile_06 { display: block; height: 80px; }

.profile_content .profile_box { 
background: #fff;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
margin: 0 auto;
padding: 30px 30px;
overflow: hidden;
}
.profile_content .profile_box:last-child { 
margin-bottom: 0;
}
.profile_content .profile_box h3 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 40px;
line-height: 1.2em;
text-align: center;
color: #fff;
background: #00aaff;
margin-bottom: 30px;
padding: 5px;
}
.profile_content .profile_box h3 br { 
display: none;
}

.profile_box .profile { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.profile_box .profile .photo { 
width: 39%;
}
.profile_box .profile .text { 
width: 59%;
margin-left: 2%;
}

.profile_box .profile .photo img { 
display: block;
margin: 0 auto 15px auto;
}
.profile_box .profile .photo .name { 
display: block;
font-size: 30px;
margin-bottom: 10px;
}
.profile_box .profile .photo .post { 
display: inline-block;
color: #fff;
background: #00aaff;
margin-right: 10px;
padding: 2px 10px;
border-radius: 20px;
}

.profile_box .profile .text p strong { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 20px;
line-height: 1.5em;
color: #00aaff;
}

@media (max-width: 767px) {
.profile_content .profile_box { max-width: 600px; padding: 15px 15px; }
.profile_content .profile_box h3 { font-size: 30px; }
.profile_box .profile { display: block; }
.profile_box .profile .photo { width: 100%; }
.profile_box .profile .text { width: 100%; margin-left: 0; margin-top: 30px; }
}
@media (max-width: 450px) {
.profile_back .back_btn_01 a { font-size: 16px; }
.profile_back .back_btn_02 a { font-size: 24px; }
.profile_content .profile_box h3 { font-size: 24px; }
.profile_content .profile_box h3 br { display: block; }
}






#wrapper { min-width: auto; padding-top: 0; }
.bg-secondary { background: #ffe032; padding-bottom: 80px; }

.content-back { max-width: 800px; margin: 0 auto; padding: 30px; background: #fff; box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%); }
.content-back2 { max-width: 1000px; margin: 0 auto; padding: 0 15px; }

.content-width { max-width: 100%; }

.content-width p { color: #111; }

.content-width .title h3 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 40px;
line-height: 1.2em;
text-align: center;
color: #fff;
background: #00aaff;
margin-bottom: 30px;
padding: 10px 15px;
}
.content-width .title h3 .small {
display: block;
font-size: 20px;
text-align: center;
}
.content-width .title .no { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 24px;
line-height: 1.2em;
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
margin-bottom: 5px;
padding-bottom: 5px;
}

.content-width .person p { 
border-bottom: 2px solid #00aaff;
padding-bottom: 20px;
}

a.back-btn { border: 1px solid #111; color: #111; }

.fin img { width: 100%; max-width: 70px; }

@media (max-width: 767px) {
.content-back { max-width: 600px; padding: 15px; }
.content-width .title h3 { font-size: 30px; }
}
@media (max-width: 450px) {
.content-width .title h3 { font-size: 24px; }
.content-width .title h3 .small { font-size: 16px; }
}


.project_wrap { 
padding: 0 15px;
}
.project_box { 
max-width: 1200px;
margin: 80px auto 0 auto;
}
.project_box .project { 
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 30px;
}
.project_box .project:last-child { 
margin-bottom: 0;
}
.project_box .project .box { 
display: block;
width: 49%;
background: #fff;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
padding-bottom: 30px;
}
.project_box .project .box:last-child { 
margin-left: 2%;
}

.project_box .project .box h3 { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 30px;
line-height: 1.2em;
color: #00aaff;
margin-bottom: 5px;
padding: 0 30px;
}
.project_box .project .box p { 
padding: 0 30px;
}
.project_box .project .box .vol { 
font-family: "Noto Sans JP", sans-serif;
font-weight: 800; /* <weight>: Use a value from 100 to 900 */
font-size: 20px;
border-bottom: 2px solid #00aaff;
margin-bottom: 10px;
padding-bottom: 10px;
margin-left: 30px;
margin-right: 30px;
}
.project_box .project .box .vol .no { 
font-size: 30px;
}
.project_box .project .box .band { 
background: rgb(255,255,255);
background: linear-gradient(315deg, rgba(255,255,255,1) 0%, rgba(133,214,255,1) 80%, rgba(0,170,255,1) 100%);
clip-path: polygon(0 0, 100% 0, 0 100%);
height: 50px;
margin-bottom: 15px;
}

@media (max-width: 767px) {
.project_box .project { display: block; }
.project_box .project .box { width: 100%; }
.project_box .project .box:last-child { margin-left: 0; margin-top: 30px; }
}



.yoake_back .back_btn_01 { 
max-width: 1000px;
margin: 0 auto 60px auto;
text-align: right;
}
.yoake_back .back_btn_01 a { 
font-size: 20px;
color: #fff;
background: #004471;
border: 1px solid #004471;
padding: 5px 15px;
border-radius: 50px;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
}
.yoake_back .back_btn_02 { 
max-width: 300px;
margin: 80px auto 0 auto;
}
.yoake_back .back_btn_02 a { 
display: block;
font-size: 30px;
text-align: center;
color: #fff;
background: #004471;
padding: 10px 10px;
border-radius: 50px;
box-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 15%);
}

@media (max-width: 450px) {
.yoake_back .back_btn_01 a { font-size: 16px; }
.yoake_back .back_btn_02 a { font-size: 24px; }
}



/*====================================================================

====================================================================*/