@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;}}


.shutter{
display: block;
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: fixed;
z-index: 999;
}



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

.firstview{
width: 100%;
height: 100%;
overflow: hidden;
}

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

h1.header__logo{
width: 117px;
}

.mainvisual01{
display: none;
height: 25%;
}

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

.mainvisual02{
display: flex;
height: 40%;
}

.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: 35%;
margin: 0 auto;
font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
}

.tt__base{
color: #999999;
font-weight: 400;
font-size: 6.5vmin;
line-height: 10vmin;
}

.comm__color{
color: #F5AA00;
font-weight: 700;
}

.tour__color{
color: #DC508C;
font-weight: 700;
}


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

.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:680px){

header{
justify-content: flex-start;
}

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

.mainvisual01{
display: flex;
}

.mainvisual02{
height: 25%;
}

.title{
height: 25%;
}

.tt__base{
font-size: 6vmin;
line-height: 9vmin;
}


}




/**********************************************************
* 02：結果表示
**********************************************************/


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

h3{
color: #FFFFFF;
font-size: 18px;
line-height: 18px;
letter-spacing: 2px;
}

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

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

h3{
font-size: 27px;
line-height: 27px;
letter-spacing: 2px;
}

}


/**********************************************************
*　03：国際コミュニケーション学部
**********************************************************/

.comm_title{
width: 100%;
height: 80px;
background-color: #F5AA00;
display: flex;
align-items: center;
justify-content: center;
}


/************/

.comm_pack{
width: 100%;
background-image: url("../img/comm_back.png");
padding-bottom: 50px;
}

.comm_msg{
width: 100%;
padding: 32px;
}

.comm_msg dl dt{
font-size: 15px;
font-weight: 700;
line-height: 24px;
color: #F5AA00;
margin-bottom: 15px;
text-align: center;
}

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

/************/

.comm_contents{
width: calc(100% - 20px);
background-color: #FFFFFF;
padding: 22px;
filter: drop-shadow(3px 3px 0px rgba(245,170,0,1));
margin: 0 auto 30px;
}

/************/

.pt_title{
width: 256px;
text-align: center;
margin: 0 auto;
}

.pt_title span{
height: 30px;
font-size: 14px;
font-weight: 400;
line-height: 26px;
}

.comm_contents .pt_title p{
width: 100%;
height: 70px;
font-size: 25px;
font-weight: 700;
line-height: 32px;
color: #F5AA00;
margin-top: 10px;
position: relative;
}

.comm_contents .pt_title p::before,.comm_contents .pt_title p::after{
content: '';
display: block;
width: 35px;
height: 70px;
border-top: 1px solid;
border-bottom: 1px solid;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}

.comm_contents .pt_title p::before{
border-left: 1px solid;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
left: 0;
}

.comm_contents .pt_title p::after{
border-right: 1px solid;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
right: 0;
}

/************/

.point{
width: 100%;
margin-top: 30px;
padding-bottom: 25px;
border-bottom: 1px dotted #666666;
}

.point:last-child{
border: none;
padding-bottom: 0;
}

.pic{
width: 100%;
height: 100%;
}

.comm_contents .point dl dt{
font-size: 16px;
font-weight: 700;
line-height: 27px;
color: #F5AA00;
text-align: center;
margin:20px 0 15px 0;
}

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

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

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

.comm_pack{
padding-top: 50px;
padding-bottom: 100px;
}

.comm_msg{
width: 900PX;
padding: 0;
margin: 0 auto 32px ;
}

.comm_msg dl dt{
font-size: 20px;
line-height: 28px;
}

/************/

.comm_contents{
width: 900px;
padding: 45px;
overflow: hidden;
}

/************/

.pt_title{
width: 336px;
}

.comm_contents .pt_title p{
height: 80px;
font-size: 32px;
line-height: 40px;
}

.comm_contents .pt_title p::before,.comm_contents .pt_title p::after{
width: 40px;
height: 80px;
}

/************/

.comm_contents .point{
float: left;
width: 250px;
margin-top: 50px;
margin-right: 30px;
border: none;
padding-bottom: 0;
}

.comm_contents .point:last-child{
margin-right: 0;
}

}







/**********************************************************
*　04：国際観光学部
**********************************************************/

.tour_title{
width: 100%;
height: 80px;
background-color: #DC508C;
display: flex;
align-items: center;
justify-content: center;
}


/************/

.tour_pack{
width: 100%;
background-image: url("../img/tour_back.png");
padding-bottom: 50px;
}

.tour_msg{
width: 100%;
padding: 32px;
}

.tour_msg dl dt{
font-size: 15px;
font-weight: 700;
line-height: 24px;
color: #DC508C;
margin-bottom: 15px;
text-align: center;
}

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

/************/

.tour_contents{
width: calc(100% - 20px);
background-color: #FFFFFF;
padding: 22px;
filter: drop-shadow(3px 3px 0px rgba(220,80,140,1));
margin: 0 auto 30px;
}

/************/


.tour_contents .pt_title p{
width: 100%;
height: 70px;
font-size: 25px;
font-weight: 700;
line-height: 32px;
color: #DC508C;
margin-top: 10px;
position: relative;
}

.tour_contents .pt_title p::before,.tour_contents .pt_title p::after{
content: '';
display: block;
width: 35px;
height: 70px;
border-top: 1px solid;
border-bottom: 1px solid;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}

.tour_contents .pt_title p::before{
border-left: 1px solid;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
left: 0;
}

.tour_contents .pt_title p::after{
border-right: 1px solid;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
right: 0;
}

/************/

.point{
width: 100%;
margin-top: 30px;
padding-bottom: 25px;
border-bottom: 1px dotted #666666;
}

.point:last-child{
border: none;
padding-bottom: 0;
}

.pic{
width: 100%;
height: 100%;
}

.tour_contents .point dl dt{
font-size: 16px;
font-weight: 700;
line-height: 27px;
color: #DC508C;
text-align: center;
margin:20px 0 15px 0;
}

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


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

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

.tour_pack{
padding-top: 50px;
padding-bottom: 100px;
}

.tour_msg{
width: 900PX;
padding: 0;
margin: 0 auto 32px ;
}

.tour_msg dl dt{
font-size: 20px;
line-height: 28px;
}

/************/

.tour_contents{
width: 900px;
padding: 45px;
overflow: hidden;
}

/************/

.pt_title{
width: 336px;
}

.tour_contents .pt_title p{
height: 80px;
font-size: 32px;
line-height: 40px;
}

.tour_contents .pt_title p::before,.tour_contents .pt_title p::after{
width: 40px;
height: 80px;
}

/************/

.tour_contents .point{
float: left;
width: 250px;
margin-top: 50px;
margin-right: 30px;
border: none;
padding-bottom: 0;
}

.tour_contents .point:last-child{
margin-right: 0;
}

}







/**********************************************************
* 05：学部詳細ボタン
**********************************************************/

.detail_btn{
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 64px);
height: 80px;
max-width: 400px;
background-color: #000000;
margin: 0 auto;
position: relative;
}

.detail_btn::after{
content: '';
width: 36px;
height: auto;
background-image: url("../img/arrow_white.svg");
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto 0 auto;
}

.detail_btn span{
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
color: #FFFFFF;
}


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

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

.detail_btn{
display: block;
width: 310px;
height: 62px;
max-width: none;
background: none;
border-bottom: 1px solid #666666 ;
position: relative;
}

.detail_btn::after{
content: '';
width: 60px;
height: 60px;
background:none;
border-right: 1px solid #666666;
transform: rotate(-45deg);
top: 62px;
right: 12px;
margin: none;
}

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

.detail_btn span{
font-size: 16px;
font-weight: 700;
color: #666666;
position: absolute;
top: 20px;
left: 20px;
}

}

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



/**********************************************************
* 06：戻るボタン
**********************************************************/

.back_btn{
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 64px);
height: 80px;
max-width: 400px;
background-color: #000000;
margin: 50px auto 0 auto;
position: relative;
}

.back_btn::before{
content: '';
width: 36px;
height: auto;
background-image: url("../img/arrow_white_re.svg");
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
margin: auto 0 auto;
}

.back_btn span{
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
}

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

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

.back_btn{
margin: 70px auto 0 auto;
}

.back_btn:hover{
background-color: #969696;
transition: all .25s;
}
/*
.back_btn:hover::before{
animation: arwslide .7s ease infinite;
}*/

}

/*@keyframes arwslide{
0% {transform: translateX(0)}
50% {transform: translateX(-10px)}
100% {transform: translateX(0)}
}*/






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

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;}
}