@charset "utf-8";

/* 太字｜utility.css */
.weight_bold{
	font-weight: bolder;
}

/* 改行 */
br.wide_break{
	display: block;
	content: "";
	padding: .375em 0;
}

/* インデント */
.hangingIndent{
	padding-left: 1em;
	text-indent: -1em;
}
.hanging3Indent{
	padding-left: 3em;
	text-indent: -3em;
}

/* リンク */
a.to_newsletter{
	font-weight: bold;
	text-decoration: underline;
}
#fundamental .to_newsletter{ color: #0072ba; }
#linear .to_newsletter{ color: #cb5f12; }
#differential1 .to_newsletter{ color: #009a34; }
#probability .to_newsletter{ color: #c59411; }
#differential2 .to_newsletter{ color: #9fad00; }
#applied .to_newsletter{ color: #841872; }

/* 基本アキ */
.top0{ margin-top: 0; }
.top1{ margin-top: 1em; }
.bottom0{ margin-bottom: 0; }
.bottom1{ margin-bottom: 1em; }

/* タイトル画像｜spファーストにしないと120pxをキャンセルさせるheight:auto;が必要 */
.title_img_box{ width: 100%; } /* 画面横幅いっぱいのbox */
.title_img_box img{
    width: 100%; /* その領域にぴったり収まるように表示 */
}
@media screen and (min-width : 720px){
    .title_img_box{
        width: 1120px;
        height: 204px;
        margin: 0 auto;
    }
}

/* イントロ文 */
.introtext{
    font-size: 1rem;
}

/* アイコン */
#fundamental .content_type_icon, #fundamental .icon_box, .bg_fundamental{
/*	background-color: #004ea1;
	/* DIC-182 */
	background-color: #0072ba;
}
#linear .content_type_icon, .bg_linear{
/*	background-color: #da610d;
	/* DIC-201 */
	background-color: #cb5f12;
}
#differential1 .content_type_icon, .bg_differential1{
/*	background-color: #00a13e;
	/* DIC-2555 */
	background-color: #009a34;
}
#probability .content_type_icon{
/*	background-color: #dcae00;
	/* DIC-207 */
	background-color: #c59411;
}
#differential2 .content_type_icon{
/*	background-color: #dcae00;
	/* DIC-210 */
	background-color: #9fad00;
}
#applied .content_type_icon{
	/* DIC-210 */
	background-color: #841872;
}




.yellow_boxed_letter{
	background-color:yellow;
	border:1px #3c3c43 solid;
}



/* ketcindy関連：スマホが先 */
.ketcindyArea{
    font-size: 1rem;    /* renewal追加 */
    text-align: left;    /* renewal追加 */
    padding: .5em;
	width: calc(100% - 2em);    /* renewal追加 */
}
.ketcindyDescription.with_image{
    display: flex;
    gap: 1em;
    flex-direction: column;
    justify-content: center;
}
.ketcindyDescription .image_outer{
    text-align: center;
}
.ketcindyDescription .image_outer img{
    max-width: 100%;
}
.ketcindyDescription.sequel{
    margin-top: 1em;
}
.ketcindyBox{
/* width="819" height="460" */
/*    float: none;    /* renewal追加 */
/*    position: relative;
/*    width: calc(100vw - 20rem);    /* renewal追加 */
/*    width: 100%;    /* renewal追加 */
    margin: .5em auto;
/*    padding: calc(460 / 819 * 100%) 0 0;    */
}
/*
.ketcindyBox iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
*/
/* renewal削除
.ketcindyBox a.sp_only img{
	width: 100%;
}
*/
.ketcindyUsage{
    margin: .5em 0;
}
.ketcindyUsage h4{    /* renewalでh3から変更 */
    margin-top: 1em;
    padding-left: 1em;
    color: white;
}
#fundamental .ketcindyUsage h4{ background-color: #2371CB; }
#linear .ketcindyUsage h4{ background-color: #B35F20; }
#differential1 .ketcindyUsage h4{ background-color: #53993D; }
#differential2 .ketcindyUsage h4{ background-color: #A1AC21; }
#probability .ketcindyUsage h4{ background-color: #B79229; }
#applied .ketcindyUsage h4{ background-color: #711E6F; }

.ketcindyUsage p{
    margin: .25em .5em;
}
.usage_inner{
    margin: .25em 0.5em .25em 1.5em;
    padding: .5em 1em;
    background-color: rgba(255,255,255,.75);
}
.author{
    text-align: right;
    color: darkslategray;
    margin: 0 .5em .5em 0;
}
@media only screen and (min-width: 601px) {
    .ketcindyArea{
        padding: 1em;
    }
    .ketcindyDescription.with_image.small{
        flex-direction: row;
        gap: 1em;
    }
    .ketcindyDescription .image_outer img#petersen{
        max-width: 266px;
    }
    .ketcindyBox{
        margin: 1em auto;
    }
	.ketcindyArea.two_col{
		display: flex;
		flex-direction: row;
	}
	.ketcindyArea.two_col .ketcindyBox{
		margin: 0 0 1em 0;
	}
	.ketcindyArea.two_col .ketcindyDescription{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
    .widthMax{ width: calc( 1120px - 2em ); }
	.width885{ width: 885px; }
	.width819{ width: 819px; }
	.width782{ width: 782px; }
	.width754{ width: 754px; }
}
@media only screen and (min-width: 1025px) {
    .ketcindyDescription.with_image{
        flex-direction: row;
        gap: 1em;
    }
    .ketcindyDescription .image_outer img#matrix{
        max-width: 648px;
    }
}
.ketcindyContent{
    transform-origin: 0 0;
    -o-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
}





.table_box.pdf_list{
    text-align: left;    /* 中央揃えになっちゃうので */
}
.table_box.pdf_list th.table_header{
    text-align: center;
}

























/* 背景 */
main{
	padding: 0;
	margin: 0;
}
@media only screen and (max-width: 768px) {
	main{
		padding: 0;
		margin: 0;
	}
}
/* タイトル部 */
.titleArea{
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 180px;
}
.titleLeft{
	position: absolute;
	width: 50%;
	height: 180px;
	top: 0;
	background-repeat: repeat-x;
}
#fundamental .titleLeft{
	background-image: url("/college_math/svg/fundamental_web_main_title_left.svg");
}
.titleRight{
	position: absolute;
	width: 50%;
	height: 180px;
	left: 50%;
	background-repeat: repeat-x;
}
#fundamental .titleRight{
	background-image: url("/college_math/svg/fundamental_web_main_title_right.svg");
}
.titleBox{
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
#fundamental .titleBox{
	background-image: url("/college_math/svg/fundamental_web_main_title_pc.svg");
}
@media only screen and (max-width: 768px) {
	.titleArea{
		height: 24vw;
	}
	.titleBox{
		width: 100vw;
		height: 24vw;
	}
	#fundamental .titleBox{
		background-image: url("/college_math/svg/fundamental_web_main_title_sp.svg");
		background-size: contain;
	}
}

.dropdown{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
.menu{
	width: 450px;
	height: 40px;
	position: absolute;
	top: 100px;
	left: calc(50% - 70px);
    margin: 0;
    padding: 0;
}
.sub-menu{
	visibility: hidden;
	opacity: 0;
	position: relative;
}
.sub-menu > ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 450px;
}
.sub-menu > ul > li > a{
	text-decoration: none;
}
.menu:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	z-index: 1;
}
@media only screen and (max-width: 768px) {
	.menu{
		width: calc(326 / 750 * 100vw);
		height: calc(40 / 750 * 100vw);
		top: calc(101 / 750 * 100vw);
		left: calc(424 / 750 * 100vw);
	}
    .menu img{
        vertical-align: middle;
    }
	.sub-menu > ul{
		width: calc(326 / 750 * 100vw);
	}
}


/* ページ幅 */
.contentArea{
	width:  960px;
	position: relative;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	.contentArea{
        width: 100%;
        margin: 0 auto;
	}
}

/* 導入文 */
.introtextArea{
	margin: 1em;
	text-align: center;
	/* テスト用 
	background-color: aqua;*/
}
.introtext{
	display: inline-block;
	text-align: left;
}
@media only screen and (max-width: 768px) {
	.introtextArea{
		margin: 0;
	}
	.introtext{
        margin: .5em auto;
		padding: 0 2vw;
        line-height: 1.5em;
	}
}

/* アコーディオン */
.accbox{
	margin: 1em auto 0;
}
@media only screen and (max-width: 768px) {
	.accbox{
		width: 100%;
	}
}
.accbox input{
	display: none;	/* radioのタブとちがってclass名つけずに処理してる */
}
.accbox label{
	cursor: pointer;
	display: block;
	height: 2em;
	color: #666;
	transition: all 0.5s;
	position: relative;
	font-size: 1.5em;
	line-height: 2em;
}
#fundamental .accbox label{
	background-color: #e6edf6;
}
.accbox label .icon_box{
	position: absolute;
	width: 4em;
	height: 2em;
	background-position: right;
	background-repeat: no-repeat;
	padding-left: 2em;
}
@media only screen and (max-width: 768px) {
	.accbox label .icon_box{
		width: 2em;
		padding-left: 0;
	}
}
.accbox label .icon_box img{
	width: 2em;
	height: 2em;
}
.accbox label p.page_num{
	position: absolute;
	right: calc(100% - 6.5em);
}
.accbox label p.contents_name{
	position: absolute;
	left: 7em;
	padding-right: 2.5em;
	font-weight: bold;
}
@media only screen and (max-width: 768px) {
	.accbox label p.page_num{
		font-size: 0.75em;
		right: calc(100% - 5em);
	}
	.accbox label p.contents_name{
		font-size: 0.75em;
		left: 5.5em;
		padding-right: 3.5em;
	}
	.sp_2line{
		line-height: calc(1em / .75);
	}
    .sp_long{
        transform: scale(0.9, 1);
        transform-origin: top left;
        width: 80%;
    }
}
/* iPhoneSE など device-height:568px への対応 */
@media only screen and (max-width: 360px) {
    .contents_name{
        left: 5em;
        padding-right: 3em;
    }
    .sp_long{
        transform: scale(0.8, 1);
        transform-origin: top left;
        width: 85%;
    }
}

.accbox label:hover{
	opacity: 0.65;
}
.accbox label:after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 1.25em;
  top: .15em;
  margin: auto;
}
#fundamental .accbox label:after{
	border-top: #004ea1 2px solid;
	border-right: #004ea1 2px solid;
}
.accbox .cssacc:checked+ label:after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position:absolute;
  right: 1.25em;
  top: .65em;
  margin: auto;
}
#fundamental .accbox .cssacc:checked+ label:after{
	border-top: #004ea1 2px solid;
	border-right: #004ea1 2px solid;
}
.accbox .accshow{
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.5s;
	margin-bottom: 1em;
}
.accbox .cssacc:checked+label+.accshow{
	height: auto;
	padding: 0px;
	opacity: 1;
}
#fundamental .accbox .cssacc:checked+label+.accshow{
	background-color: #f2f6fa;    
}

/* アコーディオン内のコンテンツごとにclass設定 */
.videoArea{
	margin: .5em 1em;
}
.fileArea{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	padding: 1em;
}
.fileImg{
	width: 400px;
}
.fileImg img{
	width: 100%;
}
.fileDetail{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
	padding: 0 1em;
	position: relative;
}
.detailArea{
    margin: 1em 1em 0;
    padding: 1em;
    background-color: white;
}
.printArea{
    margin: 1em;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.printTableArea{
    width: calc( 480px - 1.5em );
    padding: 1em;
    background-color: white;
    margin-bottom: 1em;
}
.printTableArea .print_title{
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 1em;
    text-indent: -1em;
}
#fundamental .printTableArea .print_title{
    color: #004ea1;
}
.printTableArea table{
    width: 100%;
}
.printTableArea tr:nth-child(1){
    background-color: lightgray;
}
#fundamental .printTableArea tr:nth-child(2n){
    background-color: #f2f6fa;
}
.printTableArea th{
    padding: .1em 1em;
    border: solid 1px #000;
}
.printTableArea td{
    border: solid 1px #000;
    padding: .5em 1em 0;
}
@media only screen and (max-width: 768px) {
	.fileArea{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
		padding: .5em;
	}
	.fileImg{
		padding: 0 20vw 0 20vw;
	}
	.fileImg img{
		width: 50vw;
	}
	.fileDetail{
		padding: 0;
	}
    .detailArea{
        margin: .5em .5em 0;
        padding: .5em;
    }
    .printArea{
        margin: .5em;
    }
    .printTableArea{
        width: 100%;
        padding: .25em;
    }
    .printTableArea .print_title{
        padding: .5em;
        margin-bottom: 0;
    }
    .printTableArea th{
        padding: .1em .25em;
        white-space: nowrap;
    }
}
.download{
	margin-top: auto;
}
.download .icon_box{
	width: 2em;
	height: 2em;
	border-radius: 1em;
	float: left;
}
.download p{
	line-height: 2em;
	padding-left: 2.5em;
}
#fundamental .download p{
	color: #004ea1;
	font-weight: bold;
}
@media only screen and (max-width: 768px) {
    .download{
        margin-bottom: .25em;
    }
}

/* タグ指定がまずかった。
#fundamental h4{
	background-color: #004ea1;
}
*/



	
/* vimeo from star2 */
.vimeo_box {
	position: relative;
	padding: calc(360 / 640 * 960px) 0 0; /* 高さと横幅の数字には単位は入れません。 */
}
.vimeo_box_3by2{
	position: relative;
	padding: calc(2 / 3 * 960px) 0 0;
}
.vimeo_box_4by3{
	position: relative;
	padding: calc(3 / 4 * 960px) 0 0;
}
.vimeo_box iframe, .vimeo_box_3by2 iframe, .vimeo_box_4by3 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px) {
	/* video_box類をほかと同じ数値で運用するためにouterを設定 */
	.videoArea{
		width: 98%;
		margin: 0 auto;
	}
	/* 以下はほかと同じ */
	.vimeo_box {
		float: none;
		width: 100%;
		padding: calc(360 / 640 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
		margin: 0em auto 1em auto;
	}
	.vimeo_box_3by2{
		float: none;
		width: 100%;
		padding: calc(2 / 3 * 100%) 0 0;
		margin: 0em auto 1em auto;
	}
	.vimeo_box_4by3{
		float: none;
		width: 100%;
		padding: calc(3 / 4 * 100%) 0 0;
		margin: 0em auto 1em auto;
	}
}