body.tsugumi_character{
	background-color: #fff;
}

img{
	width:100%;
	height:auto;
}

header{
	background-color: #222;
	position: fixed;
	width: 100%;
	z-index: 20;
}

.header_box{
	max-width: 1200px;
	margin: auto;
	text-align: left;
	padding:10px 20px;
	display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width: 520px) {
	.header_box{
		padding:5px 20px;
	}
}

.header_box a.img{
	line-height: 0;
}

.header_box img{
	height:20px;
	width:auto;
}
.header_box p{
	color:#fff;
	margin: auto 10px;
}

#page_top span {
    color: #333;
}
#page_top span::after {
    border-top: 3px solid #333;
    border-right: 3px solid #333;
}

@media only screen and (max-width: 520px){
	#page_top {
    	background-color: rgba(255,255,255,.75);
	}
}

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

main{
	padding-top: 40px;
}
@media only screen and (max-width: 520px){
	main{
		padding-top: 30px;
	}
}

h1{
	margin: 0;
	padding: 0;
	font-weight:normal;
}

.head_raw{
	text-align: center;
	letter-spacing: 1px;
	font-size:16px;
	padding: 5px 0;
}
.head_raw span{
	color:#b22222;
	font-size:26px;
}

.head_title{
	
}

.head_title_bread{
	background: #eee;
}

.head_title_main{
	border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    background: #f5f5f5;
}

.title_bread_box{
	max-width: 900px;
	margin: auto;
	padding:6px 25px;
	font-size: 13px;
	display:flex;
	flex-wrap: wrap;
}

.title_bread_box *{
	padding-right:13px;
	margin: auto 0;
}
.title_bread_box a.top{
	text-decoration: underline;
}
@media only screen and (min-width: 521px) {
	.title_bread_box a.top:hover{
		text-decoration: none;
	}
}
.title_bread_box a{
	color:#555;
}

.head_btn_box{
	padding-left: 5px;
}

.head_btn_box a{
    padding: 3px 6px 2px;
	margin-right: 2px;
    border: solid 1px #ddd;
    display: inline-block;
    font-size: 11px;
    text-decoration: none;
    color: #666;
    background: #fff;
    border-radius: 2px;
    transition: .2s;
}

.title_main_box{
	max-width: 900px;
	margin: auto;
	padding:25px;
	display:flex;
	flex-wrap: wrap;
}
.title_main_box div:nth-child(1){
	width:90px;
}

.title_main_box div:nth-child(2){
	width:calc(100% - 300px);
	text-align: left;
	padding:0 20px;
}
.title_main_box div:nth-child(2) a{
	font-size: 34px;
	line-height: 1.2;
    color: #333;
    text-decoration: none;
}
@media only screen and (min-width: 521px) {
	.title_main_box div:nth-child(2) a:hover{
		text-decoration: underline;
	}
}


.title_main_box div:nth-child(2) p{
    margin: 7px 0 13px 0;
    color: #666;
    font-size: 12px;
	line-height: 1.5;
}
.title_main_box div:nth-child(2) p span{
	padding-left:20px;
	color:#aaa;
}

.title_main_box div:nth-child(3){
	width:170px;
	margin-bottom: auto;
	text-align: left;
	display:flex;
	flex-wrap: wrap;
}
.title_main_box div:nth-child(3) a{
	font-size: 12px;
    color: #999;
    text-decoration: none;
}
.title_main_box div:nth-child(3) p{
	order:1;
	margin: 0;
}
.title_main_box div:nth-child(3) a[href*="index"]{
	order:2;
}
.title_main_box div:nth-child(3) a[href*="contact"]{
	order:3;
	font-size: 12px;
}

.title_main_box-inner{
	display: contents;
}

.sticky_box{
	position: sticky;
    top: 40px;
	padding:20px 0 20px 40px;
	width:calc(34% - 40px);
	height:80vh;
}
.sticky_box a{
	display: block;
	line-height: 0;
	transition: .2s;
	margin-bottom: 25px;
}
.sticky_box a img{
	transition: .2s;
	border-radius: 8px;
	filter: drop-shadow(1px 0 3px rgba(0,0,0,.2));
}

@media only screen and (min-width: 521px){
	.sticky_box a:hover img{
		opacity: .85;
		border-radius: 0;
		filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	}
}
@media only screen and (max-width: 520px){
	.sticky_box{
	    top: 30px;
	}
}


.contents_box{
	max-width: 900px;
	padding:0 25px;
	margin: auto;
	display:flex;
	flex-wrap: wrap;
}

.contents_inner{
	max-width: 66%;
}

.name_box{
	display:flex;
	flex-wrap: wrap;
	padding: 25px 0;
}
.name_box img{
	width:45px;
	padding-right: 30px;
}
.name_box div{
	width:calc(100% - 75px);
	text-align: left;
}

.contents_box article{
	padding-bottom: 30px;
	
}

.contents_box article h2{
	text-align: left;
	padding:0.35em 0.35em 5px;
	margin-bottom: 25px;
	font-size: 22px;
	border-bottom: 2px solid #e3e3e3;
	color: #333;
	font-weight: bold;
}

.contents_box article .img_box,
.contents_box article .text_box{
	margin-bottom: 25px;
	transition: .2s;
}

.contents_box article .text_box{
	cursor:default;
	text-align: left;
	color: #666;
	line-height: 1.6em;
	padding:20px;
}

.contents_box article .img_box img{
	width: 68%;
	padding:1% 16%;
}

.contents_box article .img_box.logo img{
	width: 48%;
	padding: 1%;
}

@media only screen and (min-width: 521px) {
	.contents_box article .img_box:hover,
	.contents_box article .text_box:hover{
		background-color: #eee;
	}
}

.btm_btn{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:20px 0;
}

.btm_btn *{
	display: block;
    margin: 0 3px;
    text-decoration: none;
    border: 1px solid #ebebeb;
    padding: 9px 11px;
    color: #999;
}

.btm_btn div{
	border: 1px solid #fff;
	color:#333;
}


@media only screen and (max-width: 767px){
	
	.contents_inner {
    	max-width: 100%;
	}
	.sticky_box {
		display: none;
	}
	
	.title_main_box div:nth-child(1){
		order:2;
		width:55px;
	}
	.title_main_box div:nth-child(2){
		order:1;
		width:100%;
		padding:15px 0;
	}
	.title_main_box div:nth-child(3){
		order:3;
		margin: auto;
		display: flex;
		flex-wrap:wrap;
		width:calc(100% - 75px);
	}
	.title_main_box div:nth-child(3) p{
		order:1;
		margin: 0;
	}

	.title_main_box div.title_main_box-inner{
		display:block;
		width:calc(60% - 20px);
		order:2;
	}
	.title_main_box div:nth-child(3) a[href*="index"] {
    	margin: auto 10px;
		width:40%;
	}
}


@media only screen and (max-width: 520px){
	
	.title_bread_box {
		padding: 10px 20px;
	}
	.title_main_box {
		padding:8px 20px 15px;
	}
	
	.head_btn_box {
		width: 100%;
		padding-top: 7px;
	}
	.title_main_box div:nth-child(2) {
    	padding: 10px 0;
	}
	.title_main_box div:nth-child(2) a {
		font-size: 28px;
	}
	
	.title_main_box div:nth-child(3) a[href*="index"] {
    	width: 100%;
	}
	.title_main_box div.title_main_box-inner {
		width: 100%;
	}
	
	.contents_box {
		padding: 0 20px;
	}
	.contents_box article .img_box img {
    	width: 80%;
    	padding: 1% 10%;
	}
	.contents_box article .text_box {
	    padding: 10px;
	}
	.btm_btn {
	    padding: 0 0 20px;
	}
}