@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}

@media screen and (min-width:680px){body{min-width: 1000px;}}




/**********************************************************
* オープニング中のスクロール禁止
**********************************************************/

body{
overflow: hidden;
}


/**********************************************************
* 00：オープニング
**********************************************************/

.loadAni{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
color: #666666;
text-align: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: fixed;
z-index: 1000;
}

.loadAni span{
display: none;
}

.la_tx1{
font-weight: 700;
font-size: 23px;
letter-spacing: -2px;
}

.la_tx2{
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: -0.5px;
margin-top: 25px;
}


@media screen and (min-width:680px){

.la_tx1{
font-size: 30px;
letter-spacing: 0.5px;
}

.la_tx2{
font-size: 15px;
letter-spacing: 1px;
margin-top: 20px;
}


}





/**********************************************************
* ファーストビュー
**********************************************************/

.firstview{
width: 100%;
height: 100%;
background-color: #FFFFFF;
overflow: hidden;
}

header{
display: flex;
justify-content: center;
align-items: center;
height: 15%;
}

h1.header__logo{
width: 117px;
opacity: 0;
transition: all 1.5s;
}

.mainvisual01{
display: flex;
height: 25%;
opacity: 0;
transition: all 1.5s;
}

.mainvisual01 img{
width: auto;
max-width: none;
height: 100%;
}

.mainvisual02{
display: flex;
height: 25%;
opacity: 0;
transition: all 1.5s;
}

.mainvisual02 img{
width: auto;
max-width: none;
height: 100%;
}

/******　スライドアニメーション 上　左から右　******/

.mainvisual01 img:first-child{
animation: slide1 120s -60s linear infinite;
}

.mainvisual01 img:last-child{
animation: slide2 120s linear infinite;
}

/*　スライドアニメーション　下 右から左　*/

.mainvisual02 img:first-child{
animation: slide1 120s -60s linear infinite reverse;
}

.mainvisual02 img:last-child{
animation: slide2 120s linear infinite reverse;
}

/******　スライドアニメーション　******/

@keyframes slide1{
0%{transform: translateX(100%);}
100%{transform: translateX(-100%);}
}

@keyframes slide2{
0%{transform: translateX(0);}
100%{transform: translateX(-200%);}
}




/******　真ん中のタイトル　******/

.title{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 25%;
margin: 0 auto;
text-align: center;
opacity: 0;
transition: all 1.5s;
}

.title__txt1{
height: 5.5vmin;
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #666666;
font-size: 4vmin;
line-height: 5.5vmin;
letter-spacing: 1px;
margin-bottom: 1.5vmin;
}

.title__txt2{
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #FF8800;
font-size: 6.5vmin;
line-height: 8.5vmin;
margin-bottom: 1.5vmin;
}

.title__txt3{
font-family: 'Sorts Mill Goudy', serif;
font-weight: 400;
color: #666666;
font-size: 3vmin;
letter-spacing: 0.5px;
}




/******　スクロール矢印　******/

.top_arw{
width: 8px;
height: 10%;
margin: 0 auto;
display: flex;
align-items: center;
}

.top_arw img{
animation: toparrow 1s infinite;
}

@keyframes toparrow{
0%{transform: translateY(0);}
50%{transform: translateY(50%);}
100%{transform: translateY(0);}
}


/******　レスポンシブ対応　******/

@media screen and (min-width:410px){

.title__txt1{
height: 17px;
font-size: 17px;
line-height: 17px;
margin-bottom: 10px;
}

.title__txt2{
line-height: 8.5vmin;
}

.title__txt3{
font-size: 12px;
}

}


@media screen and (min-width:680px){

header{
justify-content: flex-start;
}

h1.header__logo{
width: 156px;
margin-left: 50px;
}

.title__txt1{
height: 4vmin;
font-size: 2vmin;
line-height: 4vmin;
}

.title__txt2{
font-size: 5vmin;
line-height: 6vmin;
margin-bottom: 2vmin;
}

.title__txt3{
font-size: 1.5vmin;
}

}




/**********************************************************
* メッセージ
**********************************************************/


.container{
margin-top: 30px;
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
color: #666666;
}

.fukidashi_msg{
position: relative;
width: 311px;
padding: 24px 0 24px;
margin: 0 auto;
border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
}

.fukidashi_msg::after{
content: '';
width: 30px;
height: 30px;
transform: translateX(-15px) rotate(45deg);
background-color: #FFFFFF;
border-right: 1px solid #666666;
position: absolute;
bottom: -15px;
left: 50%;
}

.fukidashi_msg h3{
font-size: 16px;
font-weight: 700;
line-height: 26px;
text-align: center;
}

.msg{
padding: 0 32px;
margin: 0 0 32px;
}

.msg dt{
font-size: 22px;
font-weight: 700;
line-height: 33px;
text-align: center;
margin: 50px 0 25px 0;
}

.msg dd{
font-size: 14px;
font-weight: 400;
line-height: 26px;
}

@media screen and (min-width:680px){

.fukidashi_msg{
width: 800px;
padding: 40px 0 40px;
}

.fukidashi_msg h3{
font-size: 26px;
line-height: 40px;
text-align: center;
}

.msg{
width: 800px;
padding: 0;
margin: 0 auto 60px;
}

.msg dt{
font-size: 40px;
line-height: 56px;
text-align: center;
margin: 50px 0 25px 0;
}

.msg dd{
font-size: 14px;
font-weight: 400;
line-height: 26px;
}

}


/**********************************************************
* ページ内リンクボタン
**********************************************************/

.anchorbtn__wrap{
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
padding: 0 32px;
margin:0 0 60px 0;
font-size: 12px;
font-weight: 700;
}

.anchorbtn__form {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
color: #FFFFFF;
text-align: center;
border-radius: 15px;
margin: 0 0 10px 0;
}

.anchorbtn__form:last-child{
margin: 0 0 0 0;
}

.type1 {
background-color: #FA7300;
}

.type2 {
background-color: #F5AA00;
}

.type3 {
background-color: #DC508C;
}


/******　レスポンシブ対応　******/

@media screen and (min-width:680px) {

.anchorbtn__wrap{
width: 800px;
padding: 0;
margin:0 auto 170px;
}

.anchorbtn__form {
width: 30%;
height: 30px;
color: #FFFFFF;
text-align: center;
border-radius: 15px;
margin: 0 10px 10px 0;
}

.anchorbtn__form:nth-child(3n){
margin: 0 0 10px 0;
}


}





/**********************************************************
* 各コラム
**********************************************************/


/******　共通　******/

h4{
color: #FFFFFF;
font-size: 17px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
}

.clm_pack{
display: flex;
flex-wrap: wrap;
padding: 40px 32px;
}

@media screen and (min-width:680px) { 


h4{
font-size: 22px;
line-height: 32px;
letter-spacing: 1px;
}

.clm_pack{
width: 900px;
margin: 0 auto;
padding: 0;
}

}


/******　学部詳細ページ・ホバーアクション（PCのみ）　******/

@keyframes shake {
0% { transform:translateX(0) }
50% { transform:translateX(15px) }
100% { transform:translate(0) }
}




/******　Type_01　******/

.clm_back01{
background-color: #FFEDD7;
}

.clm_visual01{
order: 1;
width: 100%;
}

.clm_pic01{
float: left;
transform: translateX(-32px);
width: calc(100% - 32px);
filter: drop-shadow(3px 3px 0px rgba(250,115,0,1));
position: relative;
z-index: 2;
}

.clm_box01{
display: flex;
justify-content: center;
align-items: center;
float: right;
transform: translateX(32px);
margin-top: -118px;
width: 150px;
height: 150px;
background: rgba(250,115,0,0.9);
text-align: center;
position: relative;
z-index: 3;
}

.txt_pack01{
order: 2;
width: 100%;
}

.txt_pack01 dl dt{
height: 65px;
font-size: 16px;
font-weight: 700;
line-height: 27px;
color: #FA7300;
margin: 20px 0 10px;
border-bottom: 1px dotted #FA7300;
}

.txt_pack01 dl dd{
font-size: 14px;
font-weight: 400;
line-height: 26px;
color: #666666;
}

.clm_btn01{
position: relative;
margin-top: 20px;
overflow: hidden;
}

.clm_btn_box01{
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #FA7300;
width: 100%;
background-color: #FFFFFF;
border: 2px solid #FA7300;
padding: 10px;
}

.clm_btn_arw_box01{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-color:#FA7300;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(10px) skewX(-15deg);
}

.clm_btn_arw_box01 img{
width: 36px;
transform: translateX(-5px) skewX(15deg);
}



/******　レスポンシブ対応　******/

@media screen and (min-width:680px) { 


.clm_back01{
background-color: #F8F4F0;
transform: none;
margin-bottom: 160px;
}

.clm_visual01{
width: 550px;
transform: translateY(-100px);
margin-right: 39px;
}

.clm_pic01{
float: right;
transform: none;
width: 500px;
filter: none;
}

.clm_box01{
float: left;
transform: translateY(50px);
margin-top: -200px;
width: 200px;
height: 200px;
}

.txt_pack01{
width: 311px;
margin-top: 50px;
padding-bottom: 50px;
}

.txt_pack01 dl dt{
margin: 0 0 10px;
}

.clm_btn01{
height: 62px;
margin-top: 100px;
overflow: visible;
border-bottom: 1px solid #666666;
}

.clm_btn01::after{
content: '';
width: 60px;
height: 60px;
border-right: 1px solid #666666;
transform: rotate(-45deg);
position: absolute;
top: 32px;
right: 12px;
}

.clm_btn01:hover {
animation: shake .7s ease infinite;
transform-origin: 50% 50%;
}

.clm_btn_box01{
color: #666666;
background: none;
border: none;
padding: 0;
}

.clm_btn_arw_box01{
display: none;
}

}



/******　Type_02　******/

.clm_back02{
background-color: #FFF5DC;
}

.clm_visual02{
order: 1;
width: 100%;
}

.clm_pic02{
float: left;
transform: translateX(-32px);
width: calc(100% - 32px);
filter: drop-shadow(3px 3px 0px rgba(245,170,0,1));
position: relative;
z-index: 2;
}

.clm_box02{
display: flex;
justify-content: center;
align-items: center;
float: right;
transform: translateX(32px);
margin-top: -118px;
width: 150px;
height: 150px;
background: rgba(245,170,0,0.9);
text-align: center;
position: relative;
z-index: 3;
}

.txt_pack02{
order: 2;
width: 100%;
}

.txt_pack02 dl dt{
height: 65px;
font-size: 16px;
font-weight: 700;
line-height: 27px;
color: #F5AA00;
margin: 20px 0 10px;
border-bottom: 1px dotted #F5AA00;
}

.txt_pack02 dl dd{
font-size: 14px;
font-weight: 400;
line-height: 26px;
color: #666666;
}


.clm_btn02{
position: relative;
margin-top: 20px;
overflow: hidden;
}

.clm_btn_box02{
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #F5AA00;
width: 100%;
background-color: #FFFFFF;
border: 2px solid #F5AA00;
padding: 10px;
}

.clm_btn_arw_box02{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-color:#F5AA00;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(10px) skewX(-15deg);
}

.clm_btn_arw_box02 img{
width: 36px;
transform: translateX(-5px) skewX(15deg);
}



/******　レスポンシブ対応　******/

@media screen and (min-width:680px) { 


.clm_back02{
background-color: #FFFFFF;
transform: none;
margin-bottom: 160px;
}

.clm_visual02{
order: 2;
width: 550px;
transform: translateY(-100px);
margin-left: 39px;
}

.clm_pic02{
float: left;
transform: none;
width: 500px;
filter: none;
}

.clm_box02{
float: right;
transform: translateY(50px);
margin-top: -200px;
width: 200px;
height: 200px;
}

.txt_pack02{
order: 1;
width: 311px;
margin-top: 50px;
padding-bottom: 50px;
}

.txt_pack02 dl dt{
margin: 0 0 10px;
}

.clm_btn02{
height: 62px;
margin-top: 100px;
overflow: visible;
border-bottom: 1px solid #666666;
}

.clm_btn02::after{
content: '';
width: 60px;
height: 60px;
border-right: 1px solid #666666;
transform: rotate(-45deg);
position: absolute;
top: 32px;
right: 12px;
}

.clm_btn02:hover {
animation: shake .7s ease infinite;
transform-origin: 50% 50%;
}

.clm_btn_box02{
color: #666666;
background: none;
border: none;
padding: 0;
}

.clm_btn_arw_box02{
display: none;
}

}






/******　Type_03　******/

.clm_back03{
background-color: #FAEBF6;
}

.clm_visual03{
order: 1;
width: 100%;
}

.clm_pic03{
float: left;
transform: translateX(-32px);
width: calc(100% - 32px);
filter: drop-shadow(3px 3px 0px rgba(220,80,140,1));
position: relative;
z-index: 2;
}

.clm_box03{
display: flex;
justify-content: center;
align-items: center;
float: right;
transform: translateX(32px);
margin-top: -118px;
width: 150px;
height: 150px;
background: rgba(220,80,140,0.9);
text-align: center;
position: relative;
z-index: 3;
}

.txt_pack03{
order: 2;
width: 100%;
}

.txt_pack03 dl dt{
height: 65px;
font-size: 16px;
font-weight: 700;
line-height: 27px;
color: #DC508C;
margin: 20px 0 10px;
border-bottom: 1px dotted #DC508C;
}

.txt_pack03 dl dd{
font-size: 14px;
font-weight: 400;
line-height: 26px;
color: #666666;
}


.clm_btn03{
position: relative;
margin-top: 20px;
overflow: hidden;
}

.clm_btn_box03{
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #DC508C;
width: 100%;
background-color: #FFFFFF;
border: 2px solid #DC508C;
padding: 10px;
}

.clm_btn_arw_box03{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-color:#DC508C;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(10px) skewX(-15deg);
}

.clm_btn_arw_box03 img{
width: 36px;
transform: translateX(-5px) skewX(15deg);
}



/******　レスポンシブ対応　******/

@media screen and (min-width:680px) { 


.clm_back03{
background-color: #F8F4F0;
transform: none;
margin-bottom: 160px;
}

.clm_visual03{
width: 550px;
transform: translateY(-100px);
margin-right: 39px;
}

.clm_pic03{
float: right;
transform: none;
width: 500px;
filter: none;
}

.clm_box03{
float: left;
transform: translateY(50px);
margin-top: -200px;
width: 200px;
height: 200px;
}

.txt_pack03{
width: 311px;
margin-top: 50px;
padding-bottom: 50px;
}

.txt_pack03 dl dt{
margin: 0 0 10px;
}

.clm_btn03{
height: 62px;
margin-top: 100px;
overflow: visible;
border-bottom: 1px solid #666666;
}

.clm_btn03::after{
content: '';
width: 60px;
height: 60px;
border-right: 1px solid #666666;
transform: rotate(-45deg);
position: absolute;
top: 32px;
right: 12px;
}

.clm_btn03:hover {
animation: shake .7s ease infinite;
transform-origin: 50% 50%;
}

.clm_btn_box03{
color: #666666;
background: none;
border: none;
padding: 0;
}

.clm_btn_arw_box03{
display: none;
}

}




/**********************************************************
* フッター
**********************************************************/

footer{
margin-top: 50px;
padding: 0 0 50px 0;
}

.totop_pack{
position: relative;
width: 100%;
height: 100px;
margin-bottom: 20px;
}

.totop{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
background-color: #FFFFFF;
border-radius: 50%;
padding: 15px;
}

.totop_border{
z-index: -1;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
background-color: #CACACA;
}

.totop_text{
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #CACACA;
text-align: center;
}

.totop_arw{
width: 15px;
height: 15px;
border-top: 1px solid #CACACA;
border-right: 1px solid #CACACA;
transform: rotate(-45deg);
margin: 0 auto 2px auto;
}

.ft{
height: 77px;
width: 100%;
text-align: center;
}

.ft_txt01{
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #FF8800;
font-size: 22px;
line-height: 28px;
margin-bottom: 6px;
}

.ft_txt02{
font-family: 'Sorts Mill Goudy', serif;
font-weight: 400;
color: #666666;
font-size: 10px;
letter-spacing: 0.5px;
}

.ft_logo{
display: block;
margin-top: 30px;
}

.ft_logo img{
height: 30px;
}



@media screen and (min-width:680px) { 

footer{
padding: 0 0 90px 0;
}

.totop{
cursor: pointer;
right: 40px;
margin: auto 0 auto auto;
border: 1px solid #CACACA;
}

.totop_border{
display: block;
}

.ft{
height: 138px;
}


.ft_txt01{
font-size: 40px;
line-height: 50px;
margin-bottom: 12px;
}

.ft_txt02{
font-size: 14px;
letter-spacing: 0.5px;
}

.ft_logo{
margin-top: 40px;
}

.ft_logo img{
height: 40px;
}

}


/**********************************************************
* 適宜使えるクラス名
**********************************************************/

/******　フロート解除（clearfix）　******/

.cf::after {
content: '';
display: block;
clear:both
}

/******　PC、スマホ・タブレット オンリー仕様　******/

@media screen and (max-width:679px) {
.pc_only{display: none;}
}


@media screen and (min-width:680px) {
.sm_only{display: none;}
}